diff --git a/public/icons/HomeIcon.tsx b/public/icons/HomeIcon.tsx index 72adae2..b76cc37 100644 --- a/public/icons/HomeIcon.tsx +++ b/public/icons/HomeIcon.tsx @@ -8,10 +8,10 @@ const HomeIcon: React.FC<{ className?: string }> = ({ className }) => ( xmlns="http://www.w3.org/2000/svg" className={className} > - - - - + + + + ); diff --git a/public/icons/NeufIcon.tsx b/public/icons/NeufIcon.tsx index a1e7904..d10e0c0 100644 --- a/public/icons/NeufIcon.tsx +++ b/public/icons/NeufIcon.tsx @@ -1,13 +1,29 @@ import React from "react"; -const NeufIcon: React.FC<{ className?: string }> = ({ - className -}) => ( - - - - - +const NeufIcon: React.FC<{ className?: string }> = ({ className }) => ( + + + + + + ); -export default NeufIcon; \ No newline at end of file +export default NeufIcon; diff --git a/public/icons/SettingsInactiveIcon.tsx b/public/icons/SettingsInactiveIcon.tsx index 4d16624..66f5145 100644 --- a/public/icons/SettingsInactiveIcon.tsx +++ b/public/icons/SettingsInactiveIcon.tsx @@ -1,10 +1,19 @@ import React from "react"; const SettingsInactiveIcon: React.FC<{ className?: string }> = ({ - className -}) => ( - - + className, +}) => ( + + + ); -export default SettingsInactiveIcon; \ No newline at end of file +export default SettingsInactiveIcon; diff --git a/public/icons/UiogIcon.tsx b/public/icons/UiogIcon.tsx index 0ee2eb2..8cace81 100644 --- a/public/icons/UiogIcon.tsx +++ b/public/icons/UiogIcon.tsx @@ -3,11 +3,11 @@ import React from "react"; const UiogIcon: React.FC<{ className?: string }> = ({ className }) => ( - - - - - + + + + + ); diff --git a/src/app/components/NavItem.tsx b/src/app/components/NavItem.tsx index 830169e..b41ec35 100644 --- a/src/app/components/NavItem.tsx +++ b/src/app/components/NavItem.tsx @@ -1,22 +1,35 @@ -import Link from 'next/link'; -import React, { ReactNode } from 'react'; +import Link from "next/link"; +import React, { ReactNode } from "react"; interface NavItemProps { icon: ReactNode; text: string; className?: string; link: string; + textClass?: string; } -const NavItem: React.FC = ({ icon, text, className, link }) => { +const NavItem: React.FC = ({ + icon, + text, + className, + link, + textClass = "", +}) => { return ( -
+
-
{icon}
-

{text}

+
+
{icon}
+
+

+ {text} +

); }; -export default NavItem; \ No newline at end of file +export default NavItem; diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx index 18c4aed..486f19c 100644 --- a/src/app/components/Navbar.tsx +++ b/src/app/components/Navbar.tsx @@ -1,19 +1,44 @@ // components/Navbar.jsx -import React from 'react'; -import HomeIcon from '../../../public/icons/HomeIcon'; -import LogoIcon from '../../../public/icons/LogoIcon'; -import UiogIcon from '../../../public/icons/UiogIcon'; -import NeufIcon from '../../../public/icons/NeufIcon'; -import SettingsInactiveIcon from '../../../public/icons/SettingsInactiveIcon'; -import NavItem from './NavItem'; +import React from "react"; +import HomeIcon from "../../../public/icons/HomeIcon"; +import LogoIcon from "../../../public/icons/LogoIcon"; +import UiogIcon from "../../../public/icons/UiogIcon"; +import NeufIcon from "../../../public/icons/NeufIcon"; +import SettingsInactiveIcon from "../../../public/icons/SettingsInactiveIcon"; +import NavItem from "./NavItem"; export default function Navbar() { return ( -
-
- } text="UiO Gaming" link="https://uiogaming.no/"/> - } text="Studentersamfundet" link="https://neuf.no"/> - } text="Settings" link="aa"/> +
+
+
+
+

mustafa's

+

user

+

system

+
+
+ +
+ } + text="UiO Gaming" + link="https://uiogaming.no/" + textClass="hidden md:block" + /> + } + text="Studentersamfundet" + link="https://neuf.no" + textClass="hidden md:block" + /> + } + text="Settings" + link="aa" + textClass="hidden md:block" + /> +
); diff --git a/src/app/globals.css b/src/app/globals.css index 5838541..7237371 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -17,6 +17,7 @@ --failure-bg: #6b3132; --failure: #551725; --mixed: #6B4E31; + --navbar: #211E25; } @media (prefers-color-scheme: dark) { @@ -35,6 +36,7 @@ --failure-bg: #6b3132; --failure: #551725; --mixed: #6B4E31; + --navbar: #211E25; } } diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 4428be3..4284d33 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -32,7 +32,7 @@ export default function Main() {
-
+
diff --git a/tailwind.config.ts b/tailwind.config.ts index 337546e..73ce47f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -23,6 +23,7 @@ const config: Config = { 'failure-bg': "var(--failure-bg)", 'failure': "var(--failure)", 'mixed': "var(--mixed)", + 'navbar': "var(--navbar)", }, fontWeight: { thin: "100",