70 lines
2.2 KiB
Svelte
70 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import ProfileButton from '$lib/components/ProfileButton.svelte';
|
|
import { resolve } from '$app/paths';
|
|
|
|
let { children, data } = $props();
|
|
|
|
const navItems = [
|
|
{ href: '/admin', label: 'Dashboard', icon: '📊' },
|
|
{ href: '/admin/characters', label: 'Characters', icon: '🗣️' },
|
|
{ href: '/admin/character-changes', label: 'Changes', icon: '🔄' },
|
|
{ href: '/admin/devil-fruits', label: 'Devil Fruits', icon: '🍎' },
|
|
{ href: '/admin/arcs', label: 'Arcs', icon: '📚' },
|
|
{ href: '/admin/users', label: 'Users', icon: '👥' },
|
|
{ href: '/admin/config', label: 'Settings', icon: '⚙️' }
|
|
];
|
|
|
|
const isActive = (href: string, currentPath: string) => {
|
|
if (href === '/admin') {
|
|
return currentPath === '/admin';
|
|
}
|
|
return currentPath.startsWith(href);
|
|
};
|
|
</script>
|
|
|
|
<div class="flex min-h-screen bg-slate-900">
|
|
<!-- Sidebar -->
|
|
<aside class="flex flex-col w-64 border-r border-white/5 bg-slate-950">
|
|
<div class="p-6">
|
|
<h2 class="text-lg font-black uppercase tracking-[0.15em] text-amber-50">Admin</h2>
|
|
</div>
|
|
<nav class="flex-1 space-y-2 px-3">
|
|
{#each navItems as item (item.label)}
|
|
<a
|
|
href={resolve(item.href)}
|
|
class={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-colors ${
|
|
isActive(item.href, $page.url.pathname)
|
|
? 'bg-amber-600 text-white'
|
|
: 'text-gray-300 hover:bg-slate-800 hover:text-white'
|
|
}`}
|
|
>
|
|
<span>{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
<div class="border-t border-white/5 p-3">
|
|
<a
|
|
href={resolve('/')}
|
|
class="flex items-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-gray-300 transition-colors hover:bg-slate-800 hover:text-white"
|
|
title="Return to site"
|
|
>
|
|
<span>←</span>
|
|
<span>Retour au site</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1">
|
|
<div class="flex items-center justify-between border-b border-white/5 bg-slate-950 px-8 py-4">
|
|
<h1 class="text-2xl font-bold text-white">Admin Dashboard</h1>
|
|
<ProfileButton user={data.user} />
|
|
</div>
|
|
<div class="p-8">
|
|
{@render children()}
|
|
</div>
|
|
</main>
|
|
</div>
|