41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
<aside class="sidebar" [class.collapsed]="isCollapsed">
|
|
<!-- Toggle Button -->
|
|
<button class="toggle-btn" (click)="toggleSidebar()" aria-label="Toggle sidebar">
|
|
<span class="material-icons">{{ isCollapsed ? 'chevron_right' : 'chevron_left' }}</span>
|
|
</button>
|
|
|
|
<!-- User Profile Section -->
|
|
<div class="user-section">
|
|
<div class="user-avatar">
|
|
<span class="avatar-text">{{ user.avatar }}</span>
|
|
</div>
|
|
<div class="user-info" *ngIf="!isCollapsed">
|
|
<div class="user-name">{{ user.name }}</div>
|
|
<div class="user-email">{{ user.email }}</div>
|
|
<div class="user-role">{{ user.role }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Items -->
|
|
<nav class="nav-items">
|
|
<a
|
|
*ngFor="let item of navItems"
|
|
[routerLink]="item.route"
|
|
routerLinkActive="active"
|
|
class="nav-item"
|
|
[attr.aria-label]="item.label"
|
|
>
|
|
<span class="material-icons nav-icon">{{ item.icon }}</span>
|
|
<span class="nav-label" *ngIf="!isCollapsed">{{ item.label }}</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- App Info Footer -->
|
|
<div class="sidebar-footer" *ngIf="!isCollapsed">
|
|
<div class="app-info">
|
|
<div class="app-name">Warehouse13</div>
|
|
<div class="app-version">v1.0.0</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|