feat(nav): implement mobile nav

components/custom/navbar.tsx

@@ -1,14 +1,24 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { Fragment, useEffect, useState } from "react"
 import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { ThemeSwitch } from "./theme-switch"
 import { useTranslations } from "next-intl"
 import { LocaleSwitch } from "./locale-switch"
+import { Button } from "@/components/ui/button"
+import { Menu, X } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 export default function Navbar() {
   const [scrolled, setScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const t = useTranslations('pages');
 
   useEffect(() => {
@@ -20,47 +30,95 @@ export default function Navbar() {
     return () => window.removeEventListener("scroll", onScroll)
   }, [])
 
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia("(min-width: 768px)");
+
+    const onChange = (event: MediaQueryListEvent) => {
+      if (event.matches) setMobileMenuOpen(false);
+    };
+
+    mediaQueryList.addEventListener("change", onChange);
+    return () => mediaQueryList.removeEventListener("change", onChange);
+  }, []);
+
+  const navLinks = [
+    { href: "/", label: t("home") },
+    { href: "/about", label: t("aboutMe") },
+    { href: "/projects", label: t("projects") },
+  ];
+
   return (
-    <header className="sticky top-0 left-0 w-full z-50 flex justify-center p-10">
+    <header className="sticky top-0 left-0 w-full z-50 flex justify-center p-4 md:p-10">
 
       <nav
         className={cn(
-          "flex-1 flex items-center justify-between px-7 py-4 rounded-full transition-all duration-700",
+          "relative flex-1 flex items-center justify-between px-5 py-3 md:px-7 md:py-4 rounded-full transition-all duration-700 border bg-transparent",
 
           scrolled
             ? [
-                "border border-foreground/10",
+                "border-foreground/10",
                 "backdrop-blur-xl backdrop-saturate-150",
                 "shadow-[0_4px_24px_-4px_hsl(0_0%_0%/0.12),inset_0_1px_0_0_hsl(0_0%_100%/0.12)]",
               ].join(" ")
-            : "border-transparent bg-transparent"
+            : "border-foreground/0"
         )}
       >
         <h1 className={cn("text-4xl font-medium")}>bH</h1>
 
-        <ul className="flex items-center gap-8 text-sm text-foreground/60">
+        <ul className="hidden md:flex items-center gap-8 text-sm text-foreground/60">
-          <li>
+          {navLinks.map((link) => (
-            <Link href="/" className="hover:text-foreground transition">
+            <li key={link.href}>
-              {t('home')}
+              <Link href={link.href} className="hover:text-foreground transition">
-            </Link>
+                {link.label}
-          </li>
+              </Link>
-          <li>
+            </li>
-            <Link href="/about" className="hover:text-foreground transition">
+          ))}
-              {t('aboutMe')}
-            </Link>
-          </li>
-          <li>
-            <Link href="/projects" className="hover:text-foreground transition">
-              {t('projects')}
-            </Link>
-          </li>
         </ul>
         
-        <div className="flex gap-3">
+        <div className="hidden md:flex gap-3">
           <ThemeSwitch/>
           <LocaleSwitch/>
         </div>
+
+        <DropdownMenu open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="md:hidden"
+              aria-label="Toggle menu"
+            >
+              {mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            align="end"
+            sideOffset={12}
+            className="md:hidden"
+          >
+            {navLinks.map((link, index) => (
+              <Fragment key={link.href}>
+                <DropdownMenuItem asChild>
+                  <Link href={link.href}>
+                    {link.label}
+                  </Link>
+                </DropdownMenuItem>
+                {index < navLinks.length - 1 ? (
+                  <DropdownMenuSeparator/>
+                ) : null}
+              </Fragment>
+            ))}
+
+            <DropdownMenuSeparator />
+
+            <div className="flex items-center justify-between px-2 py-1.5">
+              <ThemeSwitch />
+              <LocaleSwitch />
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </nav>
     </header>
   )
-}
+}