From a63b658dc4ef2eeca510435452d5d27f4ca79d09 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Thu, 26 Mar 2026 06:19:15 +0100
Subject: [PATCH] feat: streamline mobile header navigation

Remove dashboard link from desktop/tablet nav (logo already links to /).
Move user switcher into hamburger menu as inline clickable items on mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/backoffice/app/(app)/layout.tsx         | 23 +++++--
 apps/backoffice/app/components/MobileNav.tsx | 71 +++++++++++++++++---
 2 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/apps/backoffice/app/(app)/layout.tsx b/apps/backoffice/app/(app)/layout.tsx
index 915e84c..42e219d 100644
--- a/apps/backoffice/app/(app)/layout.tsx
+++ b/apps/backoffice/app/(app)/layout.tsx
@@ -20,7 +20,6 @@ type NavItem = {
 };
 
 const navItems: NavItem[] = [
-  { href: "/", labelKey: "nav.dashboard", icon: "dashboard" },
   { href: "/books", labelKey: "nav.books", icon: "books" },
   { href: "/series", labelKey: "nav.series", icon: "series" },
   { href: "/authors", labelKey: "nav.authors", icon: "authors" },
@@ -74,11 +73,13 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
               ))}
             </div>
 
-            <UserSwitcher
-              users={users}
-              activeUserId={activeUserId}
-              setActiveUserAction={setActiveUserAction}
-            />
+            <div className="hidden md:block">
+              <UserSwitcher
+                users={users}
+                activeUserId={activeUserId}
+                setActiveUserAction={setActiveUserAction}
+              />
+            </div>
 
             <div className="flex items-center gap-1 pl-4 ml-2 border-l border-border/60">
               <JobsIndicator />
@@ -91,7 +92,15 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
               </Link>
               <ThemeToggle />
               <LogoutButton />
-              <MobileNav navItems={navItems.map(item => ({ ...item, label: t(item.labelKey) }))} />
+              <MobileNav
+                navItems={[
+                  { href: "/", label: t("nav.dashboard"), icon: "dashboard" },
+                  ...navItems.map(item => ({ ...item, label: t(item.labelKey) })),
+                ]}
+                users={users}
+                activeUserId={activeUserId}
+                setActiveUserAction={setActiveUserAction}
+              />
             </div>
           </div>
         </nav>
diff --git a/apps/backoffice/app/components/MobileNav.tsx b/apps/backoffice/app/components/MobileNav.tsx
index 5d8c547..d3fc33a 100644
--- a/apps/backoffice/app/components/MobileNav.tsx
+++ b/apps/backoffice/app/components/MobileNav.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useTransition } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
 import { NavIcon } from "./ui";
 import { useTranslation } from "../../lib/i18n/context";
+import type { UserDto } from "@/lib/api";
 
 type NavItem = {
   href: "/" | "/books" | "/series" | "/authors" | "/libraries" | "/jobs" | "/tokens" | "/settings";
@@ -24,10 +25,24 @@ const XIcon = () => (
   </svg>
 );
 
-export function MobileNav({ navItems }: { navItems: NavItem[] }) {
+export function MobileNav({ navItems, users, activeUserId, setActiveUserAction }: {
+  navItems: NavItem[];
+  users: UserDto[];
+  activeUserId: string | null;
+  setActiveUserAction: (formData: FormData) => Promise<void>;
+}) {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [, startTransition] = useTransition();
+
+  function select(userId: string | null) {
+    startTransition(async () => {
+      const fd = new FormData();
+      fd.append("user_id", userId ?? "");
+      await setActiveUserAction(fd);
+    });
+  }
 
   useEffect(() => {
     setMounted(true);
@@ -71,15 +86,49 @@ export function MobileNav({ navItems }: { navItems: NavItem[] }) {
             </Link>
           ))}
 
-          <div className="border-t border-border/40 mt-2 pt-2">
-            <Link
-              href="/settings"
-              className="flex items-center gap-3 px-3 py-3 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200 active:scale-[0.98]"
-              onClick={() => setIsOpen(false)}
-            >
-              <NavIcon name="settings" />
-              <span className="font-medium">{t("nav.settings")}</span>
-            </Link>
+          <div className="border-t border-border/40 mt-2 pt-2 space-y-1">
+            {users.length > 0 && (
+              <>
+                <p className="px-3 pt-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">{t("users.title")}</p>
+                <button
+                  onClick={() => { select(null); setIsOpen(false); }}
+                  className={`w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-colors duration-200 active:scale-[0.98] ${
+                    !activeUserId ? "text-foreground bg-accent font-medium" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                  }`}
+                >
+                  <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                  </svg>
+                  <span>Admin</span>
+                </button>
+                {users.map((user) => (
+                  <button
+                    key={user.id}
+                    onClick={() => { select(user.id); setIsOpen(false); }}
+                    className={`w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-colors duration-200 active:scale-[0.98] ${
+                      activeUserId === user.id ? "text-foreground bg-accent font-medium" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                  >
+                    <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                    </svg>
+                    <span className="truncate">{user.username}</span>
+                  </button>
+                ))}
+              </>
+            )}
+            <div className="border-t border-border/40 mt-2 pt-2">
+              <Link
+                href="/settings"
+                className="flex items-center gap-3 px-3 py-3 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200 active:scale-[0.98]"
+                onClick={() => setIsOpen(false)}
+              >
+                <NavIcon name="settings" />
+                <span className="font-medium">{t("nav.settings")}</span>
+              </Link>
+            </div>
           </div>
         </nav>
       </div>