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

@@ -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>
 
+            <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>

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,6 +86,39 @@ export function MobileNav({ navItems }: { navItems: NavItem[] }) {
             </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"
@@ -81,6 +129,7 @@ export function MobileNav({ navItems }: { navItems: NavItem[] }) {
                 <span className="font-medium">{t("nav.settings")}</span>
               </Link>
             </div>
+          </div>
         </nav>
       </div>
     </>