sexy/packages/frontend/src/routes/admin/+layout.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]" },
  ]);

  function isActive(href: string) {
    return page.url.pathname.startsWith(href);
  }
</script>

<div class="min-h-screen bg-background">
  <div class="container mx-auto px-4">

    <!-- Mobile top nav -->
    <div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
      <a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2">
        {$_("admin.nav.back_mobile")}
      </a>
      {#each navLinks as link (link.href)}
        <a
          href={link.href}
          class={`flex items-center gap-1.5 rounded-lg px-3 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`}></span>
          {link.name}
        </a>
      {/each}
    </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>