-sidebar mobile

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

@@ -1,22 +1,27 @@
-/* .sidebar {
-  width: 220px;
-  background: #222;
-  color: white;
+.sidebar-container {
+  width: 250px;
+  transition: width 0.3s ease-in-out;
+  flex-shrink: 0; /* Prevent the sidebar from shrinking in the flex container */
+}
+
+.sidebar-container.is-collapsed {
+  width: 70px;
+}
+
+.sidebar-container.is-mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
   height: 100vh;
-  padding: 20px;
-} */
-/* .sidebar ul {
-  list-style: none;
-  padding: 0;
+  width: 250px; /* Width when shown on mobile */
+  z-index: 40;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
 }
-.sidebar li {
-  margin: 10px 0;
-  cursor: pointer;
-  transition: 0.2s;
+
+.sidebar-container.is-mobile.is-open {
+  transform: translateX(0);
 }
-.sidebar li:hover {
-  color: #00bcd4;
-} */
 
 @keyframes spin-slow {
   0% { transform: rotate(0deg); }
@@ -25,15 +30,3 @@
 .animate-spin-slow {
   animation: spin-slow 8s linear infinite;
 }
-
-@media (max-width: 768px) {
-  .sidebar {
-    position: absolute;
-    z-index: 50;
-    transform: translateX(-100%);
-  }
-
-  .sidebar.expanded {
-    transform: translateX(0);
-  }
-}

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> -->
-
-
-

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

@@ -1,32 +1,15 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-sidebar',
   standalone: false,
   templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.css'],
-  animations: [
-    trigger('sidebarState', [
-      state('expanded', style({
-        width: '220px',
-        opacity: 1
-      })),
-      state('collapsed', style({
-        width: '70px',
-        opacity: 0.95
-      })),
-      transition('expanded <=> collapsed', [
-        animate('300ms ease-in-out')
-      ])
-    ])
-  ]
+  styleUrls: ['./sidebar.component.css']
 })
 export class SidebarComponent implements OnInit {
-  isOpen = true;      // ขยายไหม
-  isMobile = false;   // ตรวจอุปกรณ์
-  showOverlay = false; // สำหรับ mobile overlay
+  isOpen = true;
+  isMobile = false;
 
   constructor(private router: Router) {}
 
@@ -39,24 +22,21 @@ export class SidebarComponent implements OnInit {
   checkDevice() {
     this.isMobile = window.innerWidth <= 768;
     if (this.isMobile) {
-      this.isOpen = false; // ซ่อน sidebar ตอนเข้า mobile
+      this.isOpen = false;
     } else {
-      this.isOpen = true;  // เปิดไว้ตลอดใน desktop
-      this.showOverlay = false;
+      this.isOpen = true;
     }
   }
 
   toggleSidebar() {
-    if (this.isMobile) {
-      this.showOverlay = !this.showOverlay;
-      this.isOpen = this.showOverlay;
-    } else {
-      this.isOpen = !this.isOpen;
-    }
+    this.isOpen = !this.isOpen;
   }
 
   navigate(path: string) {
     this.router.navigate([path]);
+    if (this.isMobile) {
+      this.isOpen = false;
+    }
   }
 
   logout() {

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

@@ -1,9 +1,19 @@
-<div class="flex h-screen overflow-hidden">
-  <!-- Sidebar (เฉพาะ main) -->
-  <app-sidebar></app-sidebar>
+<!-- Mobile Header -->
+<div class="md:hidden flex items-center justify-between bg-white text-gray-800 p-4 shadow-md relative z-50">
+  <button (click)="sidebar.toggleSidebar()">
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h10"></path>
+    </svg>
+  </button>
+  <div></div>
+</div>
+
+<div class="flex h-screen bg-gray-50">
+  <!-- Sidebar -->
+  <app-sidebar #sidebar></app-sidebar>
 
   <!-- Content -->
-  <div class="flex-1 overflow-y-auto bg-gray-50 text-gray-900">
+  <div class="flex-1 overflow-y-auto overflow-x-hidden text-gray-900">
     <router-outlet></router-outlet>
   </div>
 </div>

accounting-ng-nuttakit/src/environments/environment.development.ts

@@ -1,7 +1,7 @@
 export const environment = {
   production: false,
-  apiBaseUrl: 'https://bread-leader-move-created.trycloudflare.com'
+  // apiBaseUrl: 'https://bread-leader-move-created.trycloudflare.com'
 
 
-  // apiBaseUrl: 'http://localhost:8000'
+  apiBaseUrl: 'http://localhost:8000'
 };