arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: admin layout mobile responsiveness

Browse Source 
Same issue as settings — fixed w-56 vertical sidebar with no
breakpoint squeezed all admin pages into a sliver on mobile. Horizontal
scrollable tab bar under md, normal sidebar above; "Back to app" moves
into the header row on mobile since the desktop footer placement is
hidden there.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-04 11:05:34 +02:00
parent 67246c69e5
commit c453cb395e
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/admin/layout.tsx
+18 -9
View File
@@ -27,19 +27,28 @@ export default async function AdminLayout({ children }: { children: React.ReactN
if (dbUser?.role !== "admin") redirect("/recipes");
return (
<div className="flex min-h-screen">
<aside className="w-56 border-r bg-muted/30 flex flex-col sticky top-0 h-screen">
<div className="flex items-center gap-2 p-4 border-b font-semibold">
<Shield className="h-4 w-4 text-destructive" />
Admin
<div className="flex flex-col md:flex-row min-h-screen">
<aside className="w-full md:w-56 md:shrink-0 border-b md:border-b-0 md:border-r bg-muted/30 flex flex-col md:sticky md:top-0 md:h-screen">
<div className="flex items-center justify-between gap-2 p-4 border-b font-semibold">
<span className="flex items-center gap-2">
<Shield className="h-4 w-4 text-destructive" />
Admin
</span>
<Link
href="/recipes"
className="md:hidden flex items-center gap-1 text-xs font-normal text-muted-foreground hover:text-foreground"
>
<ArrowLeft className="h-3.5 w-3.5" />
Back to app
</Link>
</div>
<nav className="flex flex-col gap-1 p-2 flex-1">
<nav className="flex overflow-x-auto gap-1 p-2 md:flex-col md:overflow-visible md:flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
{adminNav.map(({ href, label, icon: Icon }) => (
<Link
key={href}
href={href}
className={cn(
"flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
"flex items-center gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap shrink-0 md:shrink transition-colors",
"hover:bg-accent hover:text-accent-foreground"
)}
>
@@ -48,7 +57,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
</Link>
))}
</nav>
<div className="p-2 border-t">
<div className="p-2 border-t hidden md:block">
<Link
href="/recipes"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
@@ -58,7 +67,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
</Link>
</div>
</aside>
<main className="flex-1 p-8 overflow-auto">{children}</main>
<main className="flex-1 p-4 md:p-8 overflow-auto min-w-0">{children}</main>
</div>
);
}