Merge pull request #8 from angularcafe/dev

docs(menu): Update menu & sidebar style

Author: immohammadjaved

projects/docs/src/app/shared/components/header/header.html

@@ -2,17 +2,14 @@
     <nav class="flex h-full items-center justify-between px-6 lg:pl-6 lg:pr-6 xl:pr-6">
         <!-- Left side - aligned with sidebar -->
         <div class="flex items-center gap-4">
-            <button class="lg:hidden" uiButton variant="ghost" size="icon" (click)="toggle()">
-                <ng-icon name="tablerMenu" size="18px" />
-            </button>
-            <a routerLink="/" class="hidden lg:block">
-                <img class="hidden h-9 w-auto md:block dark:hidden" src="assets/slateui-logo.svg" alt="Slate UI" />
-                <img class="hidden h-9 w-auto dark:md:block" src="assets/slateui-logo-dark.svg" alt="Slate UI" />
+            <a routerLink="/">
+                <img class="h-8 md:h-9 w-auto dark:hidden" src="assets/slateui-logo.svg" alt="Slate UI" />
+                <img class="hidden h-8 md:h-9 w-auto dark:block" src="assets/slateui-logo-dark.svg" alt="Slate UI" />
             </a>
         </div>
 
         <!-- Right side - aligned with quick links -->
-        <div class="flex gap-x-1 sm:gap-x-2">
+        <div class="hidden md:flex gap-x-1 sm:gap-x-2">
             <a uiButton variant="ghost" size="icon" target="_blank"
                 href="https://github.com/angularcafe/slateui">
                 <ng-icon name="bootstrapGithub" size="18px" />
@@ -24,5 +21,10 @@
                 <ng-icon name="tablerBlur" size="18px" />
             </button>
         </div>
+        <div class="md:hidden">
+            <button class="lg:hidden" uiButton variant="ghost" size="icon" (click)="toggle()">
+                <ng-icon name="tablerMenu" size="24px" />
+            </button>
+        </div>
     </nav>
 </header>

projects/docs/src/app/shared/components/sidebar/sidebar.html

@@ -2,12 +2,20 @@
 <div class="fixed inset-0 z-50 bg-black/50 lg:hidden" (click)="menuOpen.set(false)">
     <div class="h-full overflow-y-auto w-72 bg-background border-r border-border px-6 py-6" (click)="$event.stopPropagation()">
         <div class="flex items-center justify-between mb-6">
-            <a routerLink="/">
-                <img class="h-9 w-auto lg:hidden dark:hidden" src="assets/slateui-logo.svg" alt="Slate UI" />
-                <img class="hidden h-9 w-auto lg:hidden dark:block" src="assets/slateui-logo-dark.svg" alt="Slate UI" />
-            </a>
-            <button uiButton variant="ghost"  size="icon" (click)="menuOpen.set(false)">
-                <ng-icon name="lucideX" class="h-4 w-4" />
+            <div class="flex gap-x-1 sm:gap-x-2">
+                <a uiButton variant="ghost" size="icon" target="_blank"
+                    href="https://github.com/angularcafe/slateui">
+                    <ng-icon name="bootstrapGithub" size="18px" />
+                </a>
+                <a uiButton variant="ghost" size="icon" target="_blank" href="https://x.com/immohammadjaved">
+                    <ng-icon name="bootstrapTwitterX" size="18px" />
+                </a>
+                <button uiButton variant="ghost" size="icon" (click)="toggleTheme()">
+                    <ng-icon name="tablerBlur" size="18px" />
+                </button>
+            </div>
+            <button uiButton variant="outline"  size="icon" (click)="menuOpen.set(false)">
+                <ng-icon name="lucideX" size="18px" />
             </button>
         </div>
         <ng-container [ngTemplateOutlet]="content" />

projects/docs/src/app/shared/components/sidebar/sidebar.ts

@@ -1,8 +1,11 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { Component, model, signal } from '@angular/core';
+import { Component, inject, model, signal } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
+import { bootstrapGithub, bootstrapTwitterX } from '@ng-icons/bootstrap-icons';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
+import { tablerBlur } from '@ng-icons/tabler-icons';
+import { ThemeService } from '@slateui/theme';
 import { UiButton } from 'ui';
 
 interface NavLink {
@@ -21,10 +24,11 @@ interface NavSection {
   selector: 'docs-sidebar',
   standalone: true,
   imports: [RouterLink, NgIcon, NgTemplateOutlet, RouterLinkActive, UiButton],
-  viewProviders: [provideIcons({ lucideX })],
+  viewProviders: [provideIcons({ lucideX, bootstrapGithub, bootstrapTwitterX, tablerBlur })],
   templateUrl: './sidebar.html'
 })
 export class Sidebar {
+  themeService = inject(ThemeService);
   // Two-way binding model signal for menu state
   readonly menuOpen = model(false);
 
@@ -85,4 +89,10 @@ export class Sidebar {
   closeMenu(): void {
     this.menuOpen.set(false);
   }
+
+  toggleTheme() {
+    this.themeService.setTheme(
+      this.themeService.isDark() ? 'light' : 'dark'
+    );
+  }
 }