78 lines
3.6 KiB
Plaintext
78 lines
3.6 KiB
Plaintext
@inherits LayoutComponentBase
|
|
|
|
<div class="flex min-h-screen">
|
|
|
|
@* Desktop sidebar — collapsible *@
|
|
<aside class="@($"hidden shrink-0 border-r border-sidebar-border bg-sidebar transition-all duration-300 ease-in-out md:block {(sidebarCollapsed ? "w-16" : "w-64")}")">
|
|
<NavMenu Collapsed="sidebarCollapsed" OnToggleSidebar="ToggleSidebar" />
|
|
</aside>
|
|
|
|
@* Mobile overlay *@
|
|
@if (mobileOpen)
|
|
{
|
|
<div class="fixed inset-0 z-40 flex md:hidden">
|
|
@* Backdrop *@
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm" @onclick="CloseMobile"></div>
|
|
|
|
@* Drawer *@
|
|
<aside class="relative z-50 flex w-72 flex-col bg-sidebar shadow-xl">
|
|
@* Close button *@
|
|
<button class="absolute right-3 top-3 rounded-md p-1 text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
|
|
@onclick="CloseMobile">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 6 6 18" /><path d="m6 6 12 12" />
|
|
</svg>
|
|
</button>
|
|
<NavMenu OnNavigated="CloseMobile" />
|
|
</aside>
|
|
</div>
|
|
}
|
|
|
|
@* Main content *@
|
|
<div class="flex flex-1 flex-col overflow-hidden">
|
|
@* Top bar *@
|
|
<header class="sticky top-0 z-10 flex h-14 items-center gap-4 border-b border-border bg-background/80 px-4 backdrop-blur-sm md:px-6">
|
|
@* Mobile menu button *@
|
|
<button class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:hidden"
|
|
@onclick="OpenMobile">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
|
|
@* Desktop collapse toggle *@
|
|
<button class="hidden rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:inline-flex"
|
|
@onclick="ToggleSidebar"
|
|
title="@(sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar")">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
<path d="M9 3v18" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="flex-1 text-sm font-medium text-muted-foreground">
|
|
Enciphered UI Components
|
|
</div>
|
|
<a href="https://learn.microsoft.com/aspnet/core/"
|
|
target="_blank"
|
|
class="text-sm text-muted-foreground transition-colors hover:text-foreground">
|
|
About
|
|
</a>
|
|
</header>
|
|
|
|
@* Page content *@
|
|
<main class="flex-1 overflow-auto p-4 md:p-6">
|
|
@Body
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private bool sidebarCollapsed;
|
|
private bool mobileOpen;
|
|
|
|
private void ToggleSidebar() => sidebarCollapsed = !sidebarCollapsed;
|
|
private void OpenMobile() => mobileOpen = true;
|
|
private void CloseMobile() => mobileOpen = false;
|
|
}
|