51 lines
1.5 KiB
Svelte
51 lines
1.5 KiB
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>
|