julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: streamline mobile header navigation
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 52s
Details

Browse Source 
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>
This commit is contained in:
Julien Froidefond
2026-03-26 06:19:15 +01:00
parent 7bce41b73b
commit a63b658dc4
2 changed files with 76 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/backoffice/app/(app)/layout.tsx
View File

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

71
apps/backoffice/app/components/MobileNav.tsx
View File

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