create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/dashboard/layout.js

@@ -0,0 +1,310 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create dashboard layout components (Sidebar, Header, Layout)
+ */
+async function createLayout(config) {
+  // Sidebar Component
+  const sidebarComponent = `import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  heroHome,
+  heroChartBar,
+  heroUsers,
+  heroShoppingCart,
+  heroCog,
+  heroChevronLeft,
+  heroChevronRight,
+  heroArrowRightOnRectangle,
+  heroSquares2x2,
+} from '@ng-icons/heroicons/outline';
+import { TranslationService } from '@core/i18n/translation.service';
+
+interface NavItem {
+  labelKey: string;
+  icon: string;
+  route: string;
+  badge?: number;
+}
+
+@Component({
+  selector: 'app-sidebar',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      heroHome,
+      heroChartBar,
+      heroUsers,
+      heroShoppingCart,
+      heroCog,
+      heroChevronLeft,
+      heroChevronRight,
+      heroArrowRightOnRectangle,
+      heroSquares2x2,
+    }),
+  ],
+  template: \`
+    <aside
+      class="fixed inset-inline-start-0 top-0 z-40 flex h-screen flex-col bg-linear-to-b from-slate-900 to-slate-800 transition-all duration-300"
+      [class.w-64]="!collapsed"
+      [class.w-20]="collapsed">
+      <!-- Logo -->
+      <div class="flex h-16 items-center border-b border-slate-700/50 px-4" [class.justify-center]="collapsed">
+        <button
+          (click)="collapsed && toggleCollapse()"
+          class="flex items-center gap-3"
+          [class.cursor-pointer]="collapsed"
+          [class.cursor-default]="!collapsed">
+          <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-linear-to-br from-indigo-500 to-purple-600 shadow-lg shadow-indigo-500/30">
+            <ng-icon name="heroSquares2x2" size="20" style="color: white;"></ng-icon>
+          </div>
+        </button>
+        @if (!collapsed) {
+          <button
+            (click)="toggleCollapse()"
+            class="ms-auto rounded-lg p-1.5 text-slate-400 hover:bg-slate-700/50 hover:text-white transition-colors">
+            <ng-icon name="heroChevronLeft" size="18"></ng-icon>
+          </button>
+        }
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 space-y-1 overflow-y-auto p-3">
+        @for (item of navItems; track item.route) {
+          <a
+            [routerLink]="item.route"
+            routerLinkActive="bg-gradient-to-r from-indigo-500/20 to-purple-500/20 text-white border-indigo-400"
+            [routerLinkActiveOptions]="{ exact: item.route === '/dashboard' }"
+            class="group flex items-center gap-3 rounded-xl border-s-4 border-transparent px-3 py-3 text-slate-300 transition-all hover:bg-slate-700/50 hover:text-white"
+            [class.justify-center]="collapsed"
+            [class.px-3]="collapsed">
+            <ng-icon [name]="item.icon" size="20" class="transition-transform group-hover:scale-110"></ng-icon>
+            @if (!collapsed) {
+              <span class="font-medium">{{ item.labelKey | translate }}</span>
+              @if (item.badge) {
+                <span class="ms-auto rounded-full bg-indigo-500 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">
+                  {{ item.badge }}
+                </span>
+              }
+            }
+          </a>
+        }
+      </nav>
+
+      <!-- Expand button when collapsed -->
+      @if (collapsed) {
+        <div class="p-3">
+          <button
+            (click)="toggleCollapse()"
+            class="flex w-full items-center justify-center rounded-xl bg-slate-700/50 p-3 text-slate-300 transition-all hover:bg-indigo-500/20 hover:text-white">
+            <ng-icon name="heroChevronRight" size="20"></ng-icon>
+          </button>
+        </div>
+      }
+
+      <!-- Logout -->
+      <div class="border-t border-slate-700/50 p-3">
+        <button
+          class="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-slate-300 transition-all hover:bg-red-500/20 hover:text-red-400"
+          [class.justify-center]="collapsed">
+          <ng-icon name="heroArrowRightOnRectangle" size="20"></ng-icon>
+          @if (!collapsed) {
+            <span class="font-medium">{{ 'dashboard.logout' | translate }}</span>
+          }
+        </button>
+      </div>
+    </aside>
+  \`,
+})
+export class SidebarComponent {
+  @Input() collapsed = false;
+  @Output() collapsedChange = new EventEmitter<boolean>();
+
+  private translationService = inject(TranslationService);
+
+  navItems: NavItem[] = [
+    { labelKey: 'dashboard.overview', icon: 'heroHome', route: '/dashboard' },
+    { labelKey: 'dashboard.analytics', icon: 'heroChartBar', route: '/dashboard/analytics' },
+    { labelKey: 'dashboard.users', icon: 'heroUsers', route: '/dashboard/users', badge: 12 },
+    { labelKey: 'dashboard.orders', icon: 'heroShoppingCart', route: '/dashboard/orders', badge: 5 },
+    { labelKey: 'dashboard.settings', icon: 'heroCog', route: '/dashboard/settings' },
+  ];
+
+  toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.collapsedChange.emit(this.collapsed);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/sidebar/sidebar.component.ts'),
+    sidebarComponent
+  );
+
+  // Dashboard Header Component
+  const dashboardHeaderComponent = `import { Component, Input, inject } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  heroBell,
+  heroMagnifyingGlass,
+  heroUser,
+  heroLanguage,
+  heroChevronDown,
+} from '@ng-icons/heroicons/outline';
+import { TranslationService, type SupportedLanguage, type LanguageOption } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-dashboard-header',
+  standalone: true,
+  imports: [NgIconComponent, TranslateModule],
+  viewProviders: [provideIcons({ heroBell, heroMagnifyingGlass, heroUser, heroLanguage, heroChevronDown })],
+  template: \`
+    <header
+      class="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6">
+      <!-- Search -->
+      <div class="relative max-w-md flex-1">
+        <ng-icon
+          name="heroMagnifyingGlass"
+          size="18"
+          class="absolute top-1/2 -translate-y-1/2 text-gray-400"
+          style="inset-inline-start: 10px;">
+        </ng-icon>
+        <input
+          type="text"
+          [placeholder]="'table.search' | translate"
+          class="w-full rounded-lg border border-gray-300 p-4 ps-10 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+        />
+      </div>
+
+      <!-- Right side -->
+      <div class="flex items-center gap-4">
+        <!-- Language Switcher -->
+        <div class="relative">
+          <button
+            (click)="toggleLanguageDropdown()"
+            class="flex items-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors">
+            <ng-icon name="heroLanguage" size="20"></ng-icon>
+            <span class="hidden sm:inline text-sm font-medium">{{ currentLanguage.nativeName }}</span>
+            <ng-icon name="heroChevronDown" size="14" [class.rotate-180]="languageDropdownOpen"></ng-icon>
+          </button>
+
+          @if (languageDropdownOpen) {
+            <div class="absolute end-0 top-full mt-1 w-40 rounded-lg border border-gray-200 bg-white py-1 shadow-lg z-50">
+              @for (lang of translationService.languages; track lang.code) {
+                <button
+                  (click)="setLanguage(lang.code)"
+                  class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-50 transition-colors"
+                  [class.bg-primary-50]="lang.code === currentLang"
+                  [class.text-primary-600]="lang.code === currentLang">
+                  <span>{{ lang.flag }}</span>
+                  <span>{{ lang.nativeName }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Notifications -->
+        <button class="relative rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900">
+          <ng-icon name="heroBell" size="20"></ng-icon>
+          <span class="absolute top-1 end-1 h-2 w-2 rounded-full bg-danger-500"></span>
+        </button>
+
+        <!-- User menu -->
+        <div class="flex items-center gap-3">
+          <div class="h-9 w-9 overflow-hidden rounded-full bg-primary-100">
+            <div class="flex h-full w-full items-center justify-center">
+              <ng-icon name="heroUser" size="18" class="text-primary-600"></ng-icon>
+            </div>
+          </div>
+          <div class="hidden md:block">
+            <p class="text-sm font-medium text-gray-900">Admin User</p>
+            <p class="text-xs text-gray-500">admin&#64;example.com</p>
+          </div>
+        </div>
+      </div>
+    </header>
+  \`,
+})
+export class DashboardHeaderComponent {
+  @Input() sidebarCollapsed = false;
+
+  translationService = inject(TranslationService);
+  languageDropdownOpen = false;
+  currentLang: SupportedLanguage = 'en';
+  currentLanguage: LanguageOption = this.translationService.languages[0];
+
+  constructor() {
+    this.currentLang = this.translationService.getCurrentLanguage();
+    this.updateCurrentLanguage();
+  }
+
+  toggleLanguageDropdown(): void {
+    this.languageDropdownOpen = !this.languageDropdownOpen;
+  }
+
+  setLanguage(lang: SupportedLanguage): void {
+    this.translationService.setLanguage(lang);
+    this.currentLang = lang;
+    this.updateCurrentLanguage();
+    this.languageDropdownOpen = false;
+  }
+
+  private updateCurrentLanguage(): void {
+    const langOption = this.translationService.getLanguageOption(this.currentLang);
+    if (langOption) {
+      this.currentLanguage = langOption;
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/dashboard-header/dashboard-header.component.ts'),
+    dashboardHeaderComponent
+  );
+
+  // Dashboard Layout Component
+  const dashboardLayoutComponent = `import { Component, inject } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { DashboardHeaderComponent } from '../dashboard-header/dashboard-header.component';
+import { TranslationService } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-dashboard-layout',
+  standalone: true,
+  imports: [RouterOutlet, SidebarComponent, DashboardHeaderComponent],
+  template: \`
+    <div class="min-h-screen bg-linear-to-br from-slate-50 via-white to-indigo-50/30">
+      <app-sidebar [(collapsed)]="sidebarCollapsed"></app-sidebar>
+
+      <div
+        class="transition-all duration-300"
+        [class.ms-64]="!sidebarCollapsed"
+        [class.ms-20]="sidebarCollapsed">
+        <app-dashboard-header [sidebarCollapsed]="sidebarCollapsed"></app-dashboard-header>
+
+        <main class="p-6">
+          <router-outlet />
+        </main>
+      </div>
+    </div>
+  \`,
+})
+export class DashboardLayoutComponent {
+  private translationService = inject(TranslationService);
+  sidebarCollapsed = false;
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/dashboard/dashboard-layout.component.ts'),
+    dashboardLayoutComponent
+  );
+}
+
+module.exports = { createLayout };