30 lines
1.2 KiB
HTML
30 lines
1.2 KiB
HTML
<div class="min-h-screen flex flex-col">
|
|
<app-header (menuToggle)="toggleSidebar()"></app-header>
|
|
<div class="pt-16">
|
|
<!-- Global Themes bar: shown on Home and Theme pages, sticky under header -->
|
|
@if (showThemesBar()) {
|
|
<app-themes-nav></app-themes-nav>
|
|
}
|
|
<div class="flex flex-1 relative">
|
|
<!-- Desktop sidebar -->
|
|
<aside class="hidden md:block border-r border-slate-800 sticky top-16 self-start h-[calc(100vh-4rem)] transition-[width] duration-200"
|
|
[class.w-64]="!sidebarCollapsed()" [class.w-20]="sidebarCollapsed()">
|
|
<app-sidebar [collapsed]="sidebarCollapsed()"></app-sidebar>
|
|
</aside>
|
|
|
|
<!-- Mobile drawer sidebar -->
|
|
@if (sidebarOpen()) {
|
|
<div class="fixed inset-0 bg-black/60 z-40 md:hidden" (click)="closeSidebar()"></div>
|
|
}
|
|
<div class="fixed inset-y-0 left-0 w-72 z-40 bg-slate-900 transform transition-transform duration-200 md:hidden"
|
|
[class.-translate-x-full]="!sidebarOpen()" [class.translate-x-0]="sidebarOpen()">
|
|
<app-sidebar></app-sidebar>
|
|
</div>
|
|
|
|
<main class="flex-1 min-w-0 overflow-x-hidden">
|
|
<router-outlet></router-outlet>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|