kochwas/src/routes/admin/+layout.svelte

<script lang="ts">
  import { page } from '$app/stores';
  import { Globe, Users, DatabaseBackup, Smartphone, type Icon } from 'lucide-svelte';

  let { children } = $props();

  const items: { href: string; label: string; icon: typeof Icon }[] = [
    { href: '/admin/domains', label: 'Domains', icon: Globe },
    { href: '/admin/profiles', label: 'Profile', icon: Users },
    { href: '/admin/backup', label: 'Backup', icon: DatabaseBackup },
    { href: '/admin/app', label: 'App', icon: Smartphone }
  ];
</script>

<nav class="tabs">
  {#each items as item (item.href)}
    {@const Icon = item.icon}
    <a
      href={item.href}
      class="tab"
      class:active={$page.url.pathname.startsWith(item.href)}
    >
      <Icon size={16} strokeWidth={2} />
      <span>{item.label}</span>
    </a>
  {/each}
</nav>

<section class="admin-body">
  {@render children()}
</section>

<style>
  .tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    padding: 0.5rem 0.95rem 0.5rem 0.8rem;
    background: white;
    border: 1px solid #e4eae7;
    border-radius: var(--pill-radius);
    text-decoration: none;
    color: #444;
    font-size: 0.95rem;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .tab.active {
    background: #2b6a3d;
    color: white;
    border-color: #2b6a3d;
  }
  .admin-body {
    padding: 1rem 0;
  }
</style>