fixed mobile menu

code/UI/src/app/layout/main-layout/main-layout.component.html

@@ -66,22 +66,24 @@
   </div>
   
   <!-- Mobile Sidebar using PrimeNG sidebar component -->
-  <p-sidebar 
+  <p-drawer 
     styleClass="mobile-sidebar" 
     [visible]="mobileSidebarVisible()" 
     (visibleChange)="mobileSidebarVisible.set($event)" 
     [dismissible]="true" 
-    [showCloseIcon]="false" 
+    [showCloseIcon]="false"
     position="left">
-    <div class="mobile-sidebar-content">
-      <div class="sidebar-top-line"></div>
-      
-      <!-- Shared Sidebar Content for Mobile -->
-      <app-sidebar-content 
-        [menuItems]="menuItems" 
-        [isMobile]="true"
-        (navItemClicked)="mobileSidebarVisible.set(false)">
-      </app-sidebar-content>
-    </div>
-  </p-sidebar>
+    <ng-template #headless>
+      <div class="mobile-sidebar-content">
+        <div class="sidebar-top-line"></div>
+        
+        <!-- Shared Sidebar Content for Mobile -->
+        <app-sidebar-content 
+          [menuItems]="menuItems" 
+          [isMobile]="true"
+          (navItemClicked)="mobileSidebarVisible.set(false)">
+        </app-sidebar-content>
+      </div>
+    </ng-template>
+  </p-drawer>
 </div>

code/UI/src/app/layout/main-layout/main-layout.component.ts

@@ -9,6 +9,7 @@ import { ToolbarModule } from 'primeng/toolbar';
 import { FormsModule } from '@angular/forms';
 import { MenuModule } from 'primeng/menu';
 import { SidebarModule } from 'primeng/sidebar';
+import { DrawerModule } from 'primeng/drawer';
 import { DividerModule } from 'primeng/divider';
 import { RippleModule } from 'primeng/ripple';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -35,6 +36,7 @@ interface MenuItem {
     FormsModule,
     MenuModule,
     SidebarModule,
+    DrawerModule,
     DividerModule,
     RippleModule,
     ConfirmDialogModule,