From 487e7755be3fe243b0fc1687e7d5beef50c2e5af Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Fri, 3 Jul 2026 20:06:36 +0200
Subject: [PATCH] fix: add mobile hamburger menu, nav links were unreachable on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nav links were `hidden md:flex` with no mobile fallback — sub-768px
viewports showed only logo + avatar, no way to reach Explore, Feed,
Collections, etc. Add a Sheet-based hamburger menu with the same links.
---
 apps/web/components/layout/nav.tsx | 49 ++++++++++++++++++++++++++++--
 apps/web/messages/en.json          |  1 +
 apps/web/messages/fr.json          |  1 +
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/layout/nav.tsx b/apps/web/components/layout/nav.tsx
index 9b7ce89..6cd195e 100644
--- a/apps/web/components/layout/nav.tsx
+++ b/apps/web/components/layout/nav.tsx
@@ -2,9 +2,9 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { BookOpen, Calendar, Package, ChefHat, User, Rss, FolderOpen, ShoppingCart, Shield, Search, Compass } from "lucide-react";
+import { BookOpen, Calendar, Package, ChefHat, User, Rss, FolderOpen, ShoppingCart, Shield, Search, Compass, Menu } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -12,6 +12,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { authClient } from "@/lib/auth/client";
 import { useTranslations } from "next-intl";
@@ -34,6 +42,43 @@ export function Nav() {
   return (
     <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto flex h-14 items-center gap-6 px-4">
+        <Sheet>
+          <SheetTrigger
+            render={<Button variant="ghost" size="icon" className="md:hidden" />}
+          >
+            <Menu className="h-5 w-5" />
+            <span className="sr-only">{t("menu")}</span>
+          </SheetTrigger>
+          <SheetContent side="left">
+            <SheetHeader>
+              <SheetTitle className="flex items-center gap-2">
+                <ChefHat className="h-5 w-5" />
+                Epicure
+              </SheetTitle>
+            </SheetHeader>
+            <nav className="flex flex-col gap-1 px-2">
+              {NAV_ITEMS.map(({ href, key, icon: Icon }) => (
+                <SheetClose
+                  key={href}
+                  nativeButton={false}
+                  render={
+                    <Link
+                      href={href}
+                      className={cn(
+                        buttonVariants({ variant: "ghost", size: "sm" }),
+                        "justify-start",
+                        pathname.startsWith(href) && "bg-accent"
+                      )}
+                    />
+                  }
+                >
+                  <Icon className="h-4 w-4" />
+                  {t(key)}
+                </SheetClose>
+              ))}
+            </nav>
+          </SheetContent>
+        </Sheet>
         <Link href="/recipes" className="flex items-center gap-2 font-semibold">
           <ChefHat className="h-5 w-5" />
           <span>Epicure</span>
diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index 4a497a4..4d74664 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -1,5 +1,6 @@
 {
   "nav": {
+    "menu": "Menu",
     "recipes": "Recipes",
     "explore": "Explore",
     "search": "Search",
diff --git a/apps/web/messages/fr.json b/apps/web/messages/fr.json
index 02ed264..528feb9 100644
--- a/apps/web/messages/fr.json
+++ b/apps/web/messages/fr.json
@@ -1,5 +1,6 @@
 {
   "nav": {
+    "menu": "Menu",
     "recipes": "Recettes",
     "explore": "Explorer",
     "search": "Rechercher",