From 149b6128a74ad2bfbb2e339028d15b0d6d31d5ed Mon Sep 17 00:00:00 2001 From: x2Skyz Date: Sun, 23 Nov 2025 20:12:01 +0700 Subject: [PATCH] -sidebar mobile --- .../component/sidebar/sidebar.component.css | 49 ++++++++----------- .../component/sidebar/sidebar.component.html | 28 ++++------- .../component/sidebar/sidebar.component.ts | 38 ++++---------- .../sidebar-content.component.html | 18 +++++-- .../environments/environment.development.ts | 4 +- 5 files changed, 56 insertions(+), 81 deletions(-) diff --git a/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.css b/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.css index 4d8834e..4a2f147 100644 --- a/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.css +++ b/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); - } -} diff --git a/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.html b/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.html index 630571d..5713de6 100644 --- a/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.html +++ b/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.html @@ -1,22 +1,28 @@
+ [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"> +

+ @if(!isMobile){ + }

-
- -
-
- - - - diff --git a/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.ts b/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.ts index 893babd..f5bfae7 100644 --- a/accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.ts +++ b/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() { diff --git a/accounting-ng-nuttakit/src/app/content/sidebar-content/sidebar-content.component.html b/accounting-ng-nuttakit/src/app/content/sidebar-content/sidebar-content.component.html index caeb126..dc645b3 100644 --- a/accounting-ng-nuttakit/src/app/content/sidebar-content/sidebar-content.component.html +++ b/accounting-ng-nuttakit/src/app/content/sidebar-content/sidebar-content.component.html @@ -1,9 +1,19 @@ -
- - + +
+ +
+
+ +
+ + -
+
diff --git a/accounting-ng-nuttakit/src/environments/environment.development.ts b/accounting-ng-nuttakit/src/environments/environment.development.ts index 8be19a8..ab64460 100644 --- a/accounting-ng-nuttakit/src/environments/environment.development.ts +++ b/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' };