Sebastian Krüger
648123fab5
- Layout: sidebar hidden on mobile, replaced with horizontal top nav strip - Tables: overflow-x-auto + hide secondary columns (email/category/dates/ plays/likes) on small screens; show email inline under name on mobile - Forms: grid-cols-2 → grid-cols-1 sm:grid-cols-2 on all admin forms - Markdown editor: Write/Preview tab toggle on mobile, side-by-side on sm+ - Padding: p-3 sm:p-6 on all admin pages for tighter mobile layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
75 lines
2.4 KiB
Svelte
75 lines
2.4 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="min-h-screen bg-background">
|
|
<div class="container mx-auto px-4">
|
|
|
|
<!-- Mobile top nav -->
|
|
<div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
|
|
<a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2">
|
|
← Back
|
|
</a>
|
|
{#each navLinks as link (link.href)}
|
|
<a
|
|
href={link.href}
|
|
class={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 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}
|
|
</div>
|
|
|
|
<!-- Desktop layout -->
|
|
<div class="flex min-h-screen">
|
|
<!-- Sidebar (desktop only) -->
|
|
<aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
|
|
<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 min-w-0">
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|