-sidebar mobile

accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.html

@@ -1,22 +1,28 @@
 <div
-  class="h-screen bg-linear-to-b from-amber-950 to-amber-900 text-gray-100 shadow-2xl flex flex-col relative transition-all duration-300 ease-in-out"
-  [@sidebarState]="isOpen ? 'expanded' : 'collapsed'">
+  [class.is-mobile]="isMobile"
+  [class.is-open]="isOpen"
+  [class.is-collapsed]="!isOpen && !isMobile"
+  class="sidebar-container h-full bg-linear-to-b from-amber-950 to-amber-900 text-gray-100 shadow-2xl flex flex-col relative">
 
   <button
     (click)="toggleSidebar()"
+    [class.hidden]="isMobile"
     class="absolute -right-3 top-6 bg-amber-700 hover:bg-amber-600 text-white rounded-full p-2 shadow-md transition-all duration-300">
     <i class="fas" [ngClass]="isOpen ? 'fa-angle-left' : 'fa-angle-right'"></i>
   </button>
 
+
   <div class="flex items-center gap-3 p-5">
     <h3 *ngIf="isOpen" class="text-2xl font-bold transition-all duration-300">
+      @if(!isMobile){
         <img src="logo.png" alt="">
+      }
     </h3>
   </div>
 
   <hr class="border-t border-amber-700 mx-4 my-4 opacity-70">
 
-  <ul class="flex flex-col gap-2 px-2 grow">
+  <ul class="flex flex-col gap-2 px-2 flex-1 overflow-y-auto">
 
         <li class="group flex items-center gap-3 p-3 rounded-lg cursor-pointer
                hover:bg-amber-800 hover:shadow-lg transition-all duration-300 ease-in-out"
@@ -45,21 +51,7 @@
                hover:bg-red-700 hover:shadow-lg transition-all duration-300 ease-in-out"
         (click)="logout()">
       <i class="fas fa-sign-out-alt text-xl group-hover:scale-110 transition-transform"></i>
-      <span *ngIf="isOpen" class="text-lg font-medium text-red-200">Logout</span>
+      <span *ngIf="isOpen" class="text-lg font--medium text-red-200">Logout</span>
     </li>
   </ul>
 </div>
-
-<div
-  *ngIf="isMobile && showOverlay"
-  class="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300"
-  (click)="toggleSidebar()">
-</div>
-<!--
-
-<div class="flex-1 bg-gray-100 text-gray-900 overflow-y-auto">
-  <router-outlet></router-outlet>
-</div> -->
-
-
-