feat(hamburger_menu): added mobile friendly hamburger menu

frontend/src/components/Header.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import Aku from "../assets/images/aku.png";
 
 interface NavItem {
@@ -21,6 +22,7 @@ interface HeaderProps {
 
 export default function Header({ theme }: HeaderProps) {
     const { theme: currentTheme, toggleTheme } = theme;
+    const [menuOpen, setMenuOpen] = useState(false);
 
     const navItems: NavItem[] = [
         { label: "Nextcloud", url: "https://nextcloud.aramjonghu.dev" },
@@ -39,16 +41,47 @@ export default function Header({ theme }: HeaderProps) {
         window.location.href = "/";
     };
 
-    return (
-        <header className="bg-ctp-mantle flex justify-between items-center px-4 md:px-12 py-4 md:py-6 gap-4 md:gap-6 border-b border-ctp-lavender-800">
-            <img
-                className="size-16 cursor-pointer"
-                src={Aku}
-                alt="Home"
-                onClick={goHome}
-            />
+    const closeMenu = () => {
+        setMenuOpen(false);
+    };
 
-            <nav className="flex flex-wrap gap-2 md:gap-3 items-start">
+    return (
+        <header className="bg-ctp-mantle flex flex-col md:flex-row justify-between items-start md:items-center px-4 md:px-12 py-4 md:py-6 gap-4 md:gap-6 border-b border-ctp-lavender-800">
+            <div className="grid grid-cols-3 items-center w-full md:hidden gap-4">
+                <img
+                    className="size-16 cursor-pointer justify-self-start"
+                    src={Aku}
+                    alt="Home"
+                    onClick={goHome}
+                />
+
+                <button
+                    className="theme-ui-btn ui-btn:hover font-[NerdFontSymbols] justify-self-center"
+                    aria-label="Toggle menu"
+                    aria-expanded={menuOpen}
+                    onClick={() => setMenuOpen(!menuOpen)}
+                >
+                    {menuOpen ? "\uf00d" : "\uf0c9"}
+                </button>
+
+                <button
+                    className="theme-ui-btn ui-btn:hover text-lg font-[NerdFontSymbols] justify-self-end"
+                    onClick={toggleTheme}
+                >
+                    {currentTheme === "macchiato" ? "" : ""}
+                </button>
+            </div>
+
+            <div className="hidden md:block">
+                <img
+                    className="size-16 cursor-pointer"
+                    src={Aku}
+                    alt="Home"
+                    onClick={goHome}
+                />
+            </div>
+
+            <nav className="hidden md:flex flex-wrap gap-2 md:gap-3 items-start">
                 {navItems.map((nav) => (
                     <a
                         key={nav.label}
@@ -59,7 +92,7 @@ export default function Header({ theme }: HeaderProps) {
                     </a>
                 ))}
             </nav>
-            <nav className="flex flex-wrap gap-2 md:gap-3 items-end">
+            <nav className="hidden md:flex flex-wrap gap-2 md:gap-3 items-end">
                 {pageItems.map((page) => (
                     <a
                         key={page.label}
@@ -71,7 +104,7 @@ export default function Header({ theme }: HeaderProps) {
                 ))}
             </nav>
 
-            <div>
+            <div className="hidden md:block">
                 <button
                     className="theme-ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]"
                     onClick={toggleTheme}
@@ -79,6 +112,38 @@ export default function Header({ theme }: HeaderProps) {
                     {currentTheme === "macchiato" ? "" : ""}
                 </button>
             </div>
+
+            <div
+                className={`md:hidden w-full overflow-hidden transition-all duration-150 ease-in-out ${
+                    menuOpen
+                        ? "max-h-80 opacity-100 visible"
+                        : "max-h-0 opacity-0 invisible"
+                }`}
+            >
+                <nav className="flex flex-col gap-2 w-full max-w-sm mx-auto border-t border-ctp-lavender-800 pt-4">
+                    {navItems.map((item) => (
+                        <a
+                            key={item.label}
+                            href={item.url}
+                            className="ui-btn ui-btn:hover px-2 py-1 w-full"
+                            onClick={closeMenu}
+                        >
+                            {item.label}
+                        </a>
+                    ))}
+                    <div className="w-full border-t border-ctp-lavender-800 my-2" />
+                    {pageItems.map((item) => (
+                        <a
+                            key={item.label}
+                            href={item.url}
+                            className="ui-btn ui-btn:hover px-2 py-1 w-full"
+                            onClick={closeMenu}
+                        >
+                            {item.label}
+                        </a>
+                    ))}
+                </nav>
+            </div>
         </header>
     );
 }