add sidebar and various component

frontend/src/app/components/nav-sidebar/nav-sidebar.html

@@ -0,0 +1,40 @@
+<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>