From 6e7bf0594248fe611d82981a6632c099bbd60ee4 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 29 May 2026 01:07:27 +0200
Subject: [PATCH] feat(frontend): add hamburger sheet menu for mobile nav

---
 thoughts-frontend/components/main-nav.tsx | 108 +++++++++++++++-------
 1 file changed, 76 insertions(+), 32 deletions(-)

diff --git a/thoughts-frontend/components/main-nav.tsx b/thoughts-frontend/components/main-nav.tsx
index 684b28f..99e6ae9 100644
--- a/thoughts-frontend/components/main-nav.tsx
+++ b/thoughts-frontend/components/main-nav.tsx
@@ -1,48 +1,92 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Menu } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SearchInput } from "./search-input";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 
 interface MainNavProps {
   isLoggedIn?: boolean;
 }
 
+const NAV_LINKS = (isLoggedIn: boolean) => [
+  { href: "/users/all", label: "Discover" },
+  { href: "/about/fediverse", label: "Fediverse" },
+  ...(isLoggedIn ? [{ href: "/friends", label: "Friends" }] : []),
+];
+
 export function MainNav({ isLoggedIn }: MainNavProps) {
   const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const links = NAV_LINKS(!!isLoggedIn);
+
   return (
-    <nav className="inline-flex md:flex items-center space-x-6 text-sm font-medium">
-      <Link
-        href="/users/all"
-        className={cn(
-          "transition-colors hover:text-foreground/80",
-          pathname === "/users/all" ? "text-foreground" : "text-foreground/60"
-        )}
-      >
-        Discover
-      </Link>
-      <Link
-        href="/about/fediverse"
-        className={cn(
-          "transition-colors hover:text-foreground/80",
-          pathname === "/about/fediverse" ? "text-foreground" : "text-foreground/60"
-        )}
-      >
-        Fediverse
-      </Link>
-      {isLoggedIn && (
-        <Link
-          href="/friends"
-          className={cn(
-            "transition-colors hover:text-foreground/80",
-            pathname === "/friends" ? "text-foreground" : "text-foreground/60"
-          )}
-        >
-          Friends
-        </Link>
-      )}
-      <SearchInput />
-    </nav>
+    <>
+      {/* Desktop nav */}
+      <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
+        {links.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              "transition-colors hover:text-foreground/80",
+              pathname === href ? "text-foreground" : "text-foreground/60"
+            )}
+          >
+            {label}
+          </Link>
+        ))}
+        <SearchInput />
+      </nav>
+
+      {/* Mobile hamburger */}
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            aria-label="Open menu"
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-72 glass-effect">
+          <SheetHeader>
+            <SheetTitle className="text-left">Menu</SheetTitle>
+          </SheetHeader>
+          <nav className="flex flex-col gap-1 mt-6">
+            {links.map(({ href, label }) => (
+              <Link
+                key={href}
+                href={href}
+                onClick={() => setOpen(false)}
+                className={cn(
+                  "px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-accent",
+                  pathname === href
+                    ? "bg-accent text-foreground"
+                    : "text-foreground/70"
+                )}
+              >
+                {label}
+              </Link>
+            ))}
+          </nav>
+          <div className="mt-6">
+            <SearchInput />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
   );
 }