36 style and fill in headernavbar (#59)

* feat(frontend): ✨ Change navbar styling Changed the navbar styling a bit and made the dark/light mode more intuitive * feat(frontend): ✨ Change nav styling Changed the navbar styling and added some icons
NTNU-SmallSatLab · Jan 29, 2024 · e4a52d2 · e4a52d2
1 parent 17a8411
commit e4a52d2
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 54 deletions.
diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2024-01-27T19:38:43.233Z"
+    "x-generation-date": "2024-01-29T13:13:34.705Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
@@ -1,7 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     images: {
-        domains: ["www.ntnu.edu", "localhost"], // Add your domain(s) here
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "**",
+            },
+        ],
     },
 };
 

diff --git a/frontend/src/app/(about)/positions/page.tsx b/frontend/src/app/(about)/positions/page.tsx
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -28,6 +28,7 @@ export default function RootLayout({
                         attribute="class"
                         defaultTheme="system"
                         enableSystem
+                        disableTransitionOnChange
                     >
                         <Navbar />
                         <main className="flex-grow p-5">{children}</main>

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -30,65 +30,85 @@ export default function Navbar() {
         return pathname === path ? "secondary" : "ghost";
     };
 
-    const { setTheme } = useTheme();
+    const { theme, setTheme } = useTheme();
+    const isLightTheme = theme === "light";
+
+    const toggleTheme = () => {
+        setTheme(isLightTheme ? "dark" : "light");
+    };
 
     return (
         <nav className="flex items-center justify-between p-4 bg-slate-700 dark:bg-slate-500 text-white w-full">
-            <div>
+            <div className="flex-1">
                 <Link href="/">
-                    <Button variant={getButtonVariant("/")}>
+                    <Button
+                        variant={getButtonVariant("/")}
+                        className="m-0 p-0 pr-4"
+                    >
+                        <Icon icon="mdi-light:home" className="size-10" />
                         Logo
-                        <Icon icon="mdi-light:home" className="size-10 ml-6" />
                     </Button>
                 </Link>
             </div>
 
-            <div className="flex items-center flex-grow justify-center gap-10">
-                <Link href="/blog">
-                    <Button variant={getButtonVariant("/blog")}>Blog</Button>
-                </Link>
-
-                <Link href="/projects">
-                    <Button variant={getButtonVariant("/projects")}>
-                        Projects
-                    </Button>
-                </Link>
+            <div className="flex-1 flex justify-center">
+                <div className="flex items-center gap-8">
+                    <Link href="/blog">
+                        <Button variant={getButtonVariant("/blog")}>
+                            Blog
+                        </Button>
+                    </Link>
 
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant={getButtonVariant("/about")}>
-                            About (arrow icon)
+                    <Link href="/projects">
+                        <Button variant={getButtonVariant("/projects")}>
+                            Projects
                         </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                        <Link href="/team" passHref>
-                            <DropdownMenuItem>Team</DropdownMenuItem>
-                        </Link>
-                        <Link href="/partners" passHref>
-                            <DropdownMenuItem>Partners</DropdownMenuItem>
-                        </Link>
-                        <Link href="/contact" passHref>
-                            <DropdownMenuItem>Contact</DropdownMenuItem>
-                        </Link>
-                        <Link href="/positions" passHref>
-                            <DropdownMenuItem>Positions</DropdownMenuItem>
-                        </Link>
-                        <Link href="/infrastructure" passHref>
-                            <DropdownMenuItem>Infrastructure</DropdownMenuItem>
-                        </Link>
-                    </DropdownMenuContent>
-                </DropdownMenu>
+                    </Link>
 
-                <Button onClick={() => setTheme("light")}>Light</Button>
-                <Button onClick={() => setTheme("dark")}>Dark</Button>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant={getButtonVariant("/about")}>
+                                About
+                                <Icon
+                                    icon="raphael:arrowdown"
+                                    className="ml-1 size-5"
+                                />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            <Link href="/team" passHref>
+                                <DropdownMenuItem className="hover:cursor-pointer">
+                                    Team
+                                </DropdownMenuItem>
+                            </Link>
+                            <Link href="/partners" passHref>
+                                <DropdownMenuItem className="hover:cursor-pointer">
+                                    Partners
+                                </DropdownMenuItem>
+                            </Link>
+                            <Link href="/contact" passHref>
+                                <DropdownMenuItem className="hover:cursor-pointer">
+                                    Contact
+                                </DropdownMenuItem>
+                            </Link>
+                            <Link href="/infrastructure" passHref>
+                                <DropdownMenuItem className="hover:cursor-pointer">
+                                    Infrastructure
+                                </DropdownMenuItem>
+                            </Link>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
             </div>
 
-            <div className="ml-auto">
-                <input
-                    type="text"
-                    placeholder="Search"
-                    className="p-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 text-black"
-                />
+            <div className="flex-1 flex justify-end">
+                <Button onClick={toggleTheme} variant={"ghost"}>
+                    {isLightTheme ? (
+                        <Icon icon="material-symbols:dark-mode" />
+                    ) : (
+                        <Icon icon="material-symbols:light-mode" />
+                    )}
+                </Button>
             </div>
         </nav>
     );