sexy/packages/frontend/src/routes/admin/+layout.svelte

<script lang="ts">
  import { page } from "$app/state";

  const { children } = $props();

  const navLinks = [
    { name: "Users", href: "/admin/users", icon: "icon-[ri--team-line]" },
    { name: "Videos", href: "/admin/videos", icon: "icon-[ri--film-line]" },
    { name: "Articles", href: "/admin/articles", icon: "icon-[ri--article-line]" },
  ];

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

<div class="flex min-h-screen bg-background">
  <!-- Sidebar -->
  <aside class="w-56 shrink-0 border-r border-border/40 bg-card/60 backdrop-blur-sm flex flex-col">
    <div class="px-4 py-5 border-b border-border/40">
      <a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors">
        ← Back to site
      </a>
      <h1 class="mt-2 text-base font-bold text-foreground">Admin</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 overflow-auto">
    {@render children()}
  </main>
</div>