Sebastian Krüger
7af9c0d7ca
Mobile nav now scrolls horizontally with hidden scrollbar; nav items don't shrink and show icon-only on xs, icon+label on sm and up. Added scrollbar-none utility to app.css. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
86 lines
3.0 KiB
Svelte
86 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/state";
|
|
import { _ } from "svelte-i18n";
|
|
|
|
const { children } = $props();
|
|
|
|
const navLinks = $derived([
|
|
{ name: $_("admin.nav.users"), href: "/admin/users", icon: "icon-[ri--team-line]" },
|
|
{ name: $_("admin.nav.videos"), href: "/admin/videos", icon: "icon-[ri--film-line]" },
|
|
{ name: $_("admin.nav.articles"), href: "/admin/articles", icon: "icon-[ri--article-line]" },
|
|
{ name: $_("admin.nav.comments"), href: "/admin/comments", icon: "icon-[ri--message-line]" },
|
|
{
|
|
name: $_("admin.nav.recordings"),
|
|
href: "/admin/recordings",
|
|
icon: "icon-[ri--record-circle-line]",
|
|
},
|
|
]);
|
|
|
|
function isActive(href: string) {
|
|
return page.url.pathname.startsWith(href);
|
|
}
|
|
</script>
|
|
|
|
<div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Mobile top nav -->
|
|
<div class="lg:hidden border-b border-border/40">
|
|
<div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
|
|
<a
|
|
href="/"
|
|
class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
|
|
>
|
|
{$_("admin.nav.back_mobile")}
|
|
</a>
|
|
{#each navLinks as link (link.href)}
|
|
<a
|
|
href={link.href}
|
|
class={`shrink-0 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
|
|
isActive(link.href)
|
|
? "bg-primary/10 text-primary"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
|
}`}
|
|
>
|
|
<span class={`${link.icon} h-4 w-4 shrink-0`}></span>
|
|
<span class="hidden sm:inline">{link.name}</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop layout -->
|
|
<div class="flex min-h-screen">
|
|
<!-- Sidebar (desktop only) -->
|
|
<aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
|
|
<div class="px-4 py-5 border-b border-border/40">
|
|
<a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors">
|
|
{$_("admin.nav.back_to_site")}
|
|
</a>
|
|
<h1 class="mt-2 text-base font-bold text-foreground">{$_("admin.nav.title")}</h1>
|
|
</div>
|
|
|
|
<nav class="flex-1 p-3 space-y-1">
|
|
{#each navLinks as link (link.href)}
|
|
<a
|
|
href={link.href}
|
|
class={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
|
|
isActive(link.href)
|
|
? "bg-primary/10 text-primary"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
|
}`}
|
|
>
|
|
<span class={`${link.icon} h-4 w-4`}></span>
|
|
{link.name}
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1 min-w-0">
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|