first commit

src/app.component.html

@@ -0,0 +1,29 @@
+<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>