feat: add Nimbus UI mode with adaptive scrollbars and layout improvements

2025-10-15 11:57:32 -04:00
parent 5a95b33081
commit 55a7a06daa
29 changed files with 1669 additions and 36 deletions
@@ -0,0 +1,34 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MobileNavService } from '../../shared/services/mobile-nav.service';
+
+@Component({
+  selector: 'app-bottom-navigation',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 h-16 flex justify-around items-center z-50">
+      <button *ngFor="let tab of tabs"
+              (click)="setActiveTab(tab.id)"
+              class="flex-1 flex flex-col items-center justify-center gap-1 text-xs py-2 px-1 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
+              [class.text-nimbus-500]="mobileNav.activeTab() === tab.id">
+        <span class="text-lg">{{ tab.icon }}</span>
+        <span class="truncate">{{ tab.label }}</span>
+      </button>
+    </nav>
+  `
+})
+export class AppBottomNavigationComponent {
+  mobileNav = inject(MobileNavService);
+
+  tabs = [
+    { id: 'sidebar', icon: '📁', label: 'Dossiers' },
+    { id: 'list', icon: '🔍', label: 'Liste' },
+    { id: 'page', icon: '📄', label: 'Page' },
+    { id: 'toc', icon: '📋', label: 'Sommaire' }
+  ];
+
+  setActiveTab(tabId: 'sidebar' | 'list' | 'page' | 'toc') {
+    this.mobileNav.setActiveTab(tabId);
+  }
+}