Responsive Accueil Component - Copy this Angular, Tailwind Component to your project

Ameliorer le code du composant:import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ selector: 'app accueil', standalone: true, imports: [ CommonModule, RouterModule ], templateUrl: './accueil.component.html', styleUrl: './accueil.component.css' }) export class AccueilComponent { deplier(label: string) { const menuItem = this.menuItems.find(item => item.label === label); if (menuItem) { menuItem.deplier = !menuItem.deplier; // close other menu items except the one that was clicked this.menuItems.forEach(item => { if (item.label !== label) { item.deplier = false; } } ) } } isExpanded = true; menuItems = [ { label: "Dashboard", route: "/dashboard", deplier:false }, { label: "CRM", route: "/crm", deplier:false }, { label: "Marketing", route: "/crm", deplier:false }, { label: "AI Models", route: "/crm" , deplier:false}, { label: "Analytics", route: "/crm", deplier:false }, { label: "Settings", route: "/crm", deplier:false } ]; toggleSidebar() { this.isExpanded = !this.isExpanded; } } <div class="flex h screen bg gray 100"> <nav [ngClass]="{'w 64': isExpanded, 'w 16': !isExpanded}" class="bg white shadow lg transition all duration 300"> <div class="p 4 flex justify between items center border b"> <div *ngIf="isExpanded" class="text xl font bold text gray 800">iBank</div><button (click)="toggleSidebar()" class="p 2 rounded lg hover:bg gray 100" aria label="Toggle sidebar"><svg xmlns="http://www.w3.org/2000/svg" class="h 6 w 6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke linecap="round" stroke linejoin="round" stroke width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg></button> </div> <div class="py 4 gap 4"> @for (item of menuItems; track $index) { <button (click)="deplier(item.label)" routerLinkActive="bg blue 100 text blue 600" class="flex items center px 4 py 3 gap 4 text gray 700 hover:bg blue 50 transition colors duration 200" [attr.aria label]="item.label"> @if (item.label === "Dashboard") { <svg xmlns= "http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi house" viewBox="0 0 16 16"> <path d="M8.707 1.5a1 1 0 0 0 1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5 1.5V8.207l.646.647a.5.5 0 0 0 .708 .708L13 5.793V2.5a.5.5 0 0 0 .5 .5h 1a.5.5 0 0 0 .5.5v1.293zM13 7.207V13.5a.5.5 0 0 1 .5.5h 9a.5.5 0 0 1 .5 .5V7.207l5 5z"/> </svg> } @else if (item.label==="CRM") { <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi bank2" viewBox="0 0 16 16"> <path d="M8.277.084a.5.5 0 0 0 .554 0l 7.5 5A.5.5 0 0 0 .5 6h1.875v7H1.5a.5.5 0 0 0 0 1h13a.5.5 0 1 0 0 1h .875V6H15.5a.5.5 0 0 0 .277 .916zM12.375 6v7h 1.25V6zm 2.5 0v7h 1.25V6zm 2.5 0v7h 1.25V6zm 2.5 0v7h 1.25V6zM8 4a1 1 0 1 1 0 2 1 1 0 0 1 0 2M.5 15a.5.5 0 0 0 0 1h15a.5.5 0 1 0 0 1z"/> </svg> } @else if (item.label==="Marketing") { <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi megaphone" viewBox="0 0 16 16"> <path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1 3 0v .214c 2.162 1.241 4.49 1.843 6.912 2.083l.405 2.712A1 1 0 0 1 5.51 15.1h .548a1 1 0 0 1 .916 .599l 1.85 3.49 .202 .003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992 2.013 75 75 0 0 0 2.483 .075c3.043 .154 6.148 .849 8.525 2.199zm1 0v11a.5.5 0 0 0 1 0v 11a.5.5 0 0 0 1 0m 1 1.35c 2.344 1.205 5.209 1.842 8 2.033v4.233q.27.015.537.036c2.568.189 5.093.744 7.463 1.993zm 9 6.215v 4.13a95 95 0 0 1 1.992.052A1.02 1.02 0 0 0 1 7v2c0 .55.448 1.002 1.006 1.009A61 61 0 0 1 4 10.065m .657.975 1.609 3.037.01.024h.548l .002 .014 .443 2.966a68 68 0 0 0 1.722 .082z"/> </svg> } @else if (item.label ==="AI Models") { <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi robot" viewBox="0 0 16 16"> <path d="M6 12.5a.5.5 0 0 1 .5 .5h3a.5.5 0 0 1 0 1h 3a.5.5 0 0 1 .5 .5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1 .765.935c .845.147 2.34.346 4.235.346s 3.39 .2 4.235 .346A.93.93 0 0 1 3 9.219zm4.542 .827a.25.25 0 0 0 .217.068l .92.9a25 25 0 0 1 1.871 .183.25.25 0 0 0 .068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189 .071l.754 .736.847 1.71a.25.25 0 0 0 .404.062l.932 .97a25 25 0 0 0 1.922 .188.25.25 0 0 0 .068 .495c .538.074 1.207.145 1.98.189a.25.25 0 0 0 .166.076l .754.785 .842 1.7a.25.25 0 0 0 .182 .135"/> <path d="M8.5 1.866a1 1 0 1 0 1 0V3h 2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0 1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2 2v 1a1 1 0 0 0 1 1V9a1 1 0 0 0 1 1v .5A4.5 4.5 0 0 0 10.5 3h 2zM14 7.5V13a1 1 0 0 1 1 1H3a1 1 0 0 1 1 1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/> </svg> } @else if (item.label === "Analytics") { <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi pie chart fill" viewBox="0 0 16 16"> <path d="M15.985 8.5H8.207l 5.5 5.5a8 8 0 0 0 13.277 5.5zM2 13.292A8 8 0 0 1 7.5.015v7.778zM8.5.015V7.5h7.485A8 8 0 0 0 8.5.015"/> </svg> } @else if (item.label === "Settings") { <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi gear wide connected" viewBox="0 0 16 16"> <path d="M7.068.727c.243 .97 1.62 .97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205 .211c.695 .719 1.888 .03 1.613.931l .08.284a.96.96 0 0 0 1.187 1.187l.283 .081c.96 .275 1.65.918.931 1.613l .211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l .286.071a.96.96 0 0 0 .434 1.622l.211.205c.719.695.03 1.888 .931 1.613l .284 .08a.96.96 0 0 0 1.187 1.187l.081.283c.275.96 .918 1.65 1.613.931l .205 .211a.96.96 0 0 0 1.622.434l .071.286c .243.97 1.62.97 1.864 0l .071 .286a.96.96 0 0 0 1.622 .434l .205.211c .695.719 1.888.03 1.613 .931l.08 .284a.96.96 0 0 0 1.186 1.187l .284.081c .96.275 1.65 .918 .931 1.613l.211 .205a.96.96 0 0 0 .434 1.622l .286 .071c .97 .243 .97 1.62 0 1.864l.286 .071a.96.96 0 0 0 .434 1.622l .211 .205c .719 .695 .03 1.888.931 1.613l.284.08a.96.96 0 0 0 1.187 1.186l .081 .284c .275 .96.918 1.65 1.613 .931l.205.211a.96.96 0 0 0 1.622 .434zM12.973 8.5H8.25l 2.834 3.779A4.998 4.998 0 0 0 12.973 8.5m0 1a4.998 4.998 0 0 0 7.557 3.779l2.834 3.78zM5.048 3.967l .087.065zm .431.355A4.98 4.98 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8zm.344 7.646.087.065z"/> </svg> } <span *ngIf="isExpanded" class="text sm font medium">{{item.label}} </span> </button> @if (item.deplier) { <button class="w full bg red 400 rounded sm mx 4">1</button> <button class="w full bg red 400 rounded sm mx 4 ">2</button> } } </div> </nav> <main class="flex 1 p 6 bg gray 100 overflow auto"> <div class="max w 7xl mx auto"><router outlet></router outlet></div> </main> </div>