alexei.dolgolyov
0bd30c5e17
Add layout system (sidebar, header, main layout), dark/light/system theme with HSL customization, 3 ambient backgrounds (mesh gradient, particle field, aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects, status pulse animations, skeleton loaders, and responsive design. Polish all existing pages with consistent theming.
44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { LayoutData } from './$types.js';
|
|
import { page } from '$app/stores';
|
|
|
|
let { data, children }: { data: LayoutData; children: Snippet } = $props();
|
|
|
|
const navItems = [
|
|
{ href: '/admin/users', label: 'Users' },
|
|
{ href: '/admin/groups', label: 'Groups' },
|
|
{ href: '/admin/settings', label: 'Settings' }
|
|
] as const;
|
|
|
|
function isActive(href: string): boolean {
|
|
return $page.url.pathname === href;
|
|
}
|
|
</script>
|
|
|
|
<div class="p-6">
|
|
<div class="mx-auto max-w-6xl">
|
|
<!-- Admin header -->
|
|
<div class="mb-6 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm">
|
|
<span class="text-sm font-semibold text-foreground">Admin Panel</span>
|
|
<div class="flex gap-1">
|
|
{#each navItems as item}
|
|
<a
|
|
href={item.href}
|
|
class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {isActive(item.href)
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
<div class="ml-auto text-xs text-muted-foreground">
|
|
{data.user.displayName} (admin)
|
|
</div>
|
|
</div>
|
|
|
|
{@render children()}
|
|
</div>
|
|
</div>
|