diff --git a/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.html b/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.html index 0b458c5..ce56099 100644 --- a/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.html +++ b/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.html @@ -1,88 +1,84 @@ -
+
- + + -
-
- + + +
+
+
+ {{ (userData?.name?.charAt(0) || 'U') | uppercase }} +
+
+

{{ userData?.name || 'User Name' }}

+

{{ userData?.role || 'Administrator' }}

+
+
+ +
+ + +
+ +
+ Dashboard + -
+ +
+ Management +
+
-
    -
  • - - @if(isOpen){ - หน้าหลัก - } -
    • + + +
    + +
    + Projects +     + + +
    + +
    + Budgets +     -
  • - - @if(isOpen){ - แดชบอร์ด - } -
    • + + +
    + +
    + Users +     -
  • - - @if(isOpen){ - การจัดการ - } -
    • + + +
    + +
    -
  • - - @if(isOpen){ - รายงาน - } -
    • - - - -
  • - - @if(isOpen){ - ลงชื่อออก - } -
    • -
- -
-
- - - - diff --git a/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.ts b/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.ts index aed7315..484f08b 100644 --- a/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.ts +++ b/ng-ttc-frontend/src/app/component/sidebar/sidebar.component.ts @@ -1,69 +1,29 @@ -import { Component, HostListener, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { trigger, state, style, transition, animate } from '@angular/animations'; -import { JwtService } from '../../services/jwt.service'; @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 + @Input() isCollapsed: boolean = false; // รับค่าสถานะย่อ/ขยาย - constructor( - private router: Router, - private jwtService: JwtService - ) {} + userData: any = { + name: 'Nuttakit', + role: 'Admin', + avatar: '' + }; - ngOnInit() { - this.checkDevice(); - window.addEventListener('resize', () => this.checkDevice()); - } + constructor(private router: Router) { } - @HostListener('window:resize') - checkDevice() { - this.isMobile = window.innerWidth <= 768; - if (this.isMobile) { - this.isOpen = false; // ซ่อน sidebar ตอนเข้า mobile - } else { - this.isOpen = true; // เปิดไว้ตลอดใน desktop - this.showOverlay = false; - } - } - - toggleSidebar() { - if (this.isMobile) { - this.showOverlay = !this.showOverlay; - this.isOpen = this.showOverlay; - } else { - this.isOpen = !this.isOpen; - } - } - - navigate(path: string) { - this.router.navigate([path]); + ngOnInit(): void { + // โหลด User Data ถ้ามี } logout() { - this.jwtService.logout(); + localStorage.removeItem('access_token'); + this.router.navigate(['/login']); } } diff --git a/ng-ttc-frontend/src/app/component/token-timer/token-timer.component.html b/ng-ttc-frontend/src/app/component/token-timer/token-timer.component.html index 64799eb..c5edaae 100644 --- a/ng-ttc-frontend/src/app/component/token-timer/token-timer.component.html +++ b/ng-ttc-frontend/src/app/component/token-timer/token-timer.component.html @@ -1,3 +1 @@ -
-

หมดอายุใน: {{ countdown }}

-
+ diff --git a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html index b48625d..636812b 100644 --- a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html +++ b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html @@ -1,52 +1,45 @@
- -
+
@if (mode == 'default') { -

- โครงการทั้งหมด -

+
+
+

+ รายการโครงการทั้งหมด +

+

ติดตาม สถานะโครงการ และ เสนอโครงการ

+
+
+ } @else if (mode == 'add') { -
- - -

- เพิ่มโครงการ -

-
- } @else if (mode == 'edit') { -
- - -

- แก้ไขโครงการ -

-
- } +
+
+

+ +
+ + เพิ่มโครงการ +

+

กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ

+
+
+ } +
- -
+
@if ( mode == 'default') { - - } @else if ( mode == 'add') { - - - - + + }
diff --git a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts index f24b319..147599c 100644 --- a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts +++ b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts @@ -67,6 +67,6 @@ export class MainProjectContent implements OnInit { // รับ Event (cancel) จากลูก onCancelProject(): void { - this.router.navigate(['/main/project']); + this.router.navigate(['/main/project']); } } diff --git a/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.css b/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.css index 3d08045..faa628f 100644 --- a/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.css +++ b/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.css @@ -1,11 +1,6 @@ -.layout { - display: flex; - height: 100vh; - width: 100%; -} -.main-container { - flex: 1; - background: #f5f5f5; - overflow-y: auto; - padding: 20px; +/* เพิ่ม transition ให้ความกว้าง sidebar */ +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; } diff --git a/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.html b/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.html index 28c490f..62f8c60 100644 --- a/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.html +++ b/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.html @@ -1,10 +1,62 @@ -
- - - +
+ + + +
+
+ + + +
+ + + +
+ + +
+ + +
+
+ + + + + +
+ Logo + Trang Technical Collage +
+ +
+ + +
+ +
+
+ + +
+ +
+ +
- -
- -
diff --git a/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.ts b/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.ts index c0ee53f..5c8f9c9 100644 --- a/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.ts +++ b/ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.ts @@ -1,11 +1,19 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-sidebar-content', standalone: false, templateUrl: './sidebar-content.component.html', - styleUrl: './sidebar-content.component.css' + styleUrls: ['./sidebar-content.component.css'] }) -export class SidebarContentComponent { +export class SidebarContentComponent implements OnInit { + isSidebarCollapsed = false; + constructor() {} + + ngOnInit(): void {} + + toggleSidebar() { + this.isSidebarCollapsed = !this.isSidebarCollapsed; + } } diff --git a/ng-ttc-frontend/src/styles.css b/ng-ttc-frontend/src/styles.css index 2e4a7f1..4a2896f 100644 --- a/ng-ttc-frontend/src/styles.css +++ b/ng-ttc-frontend/src/styles.css @@ -39,7 +39,16 @@ html, body, app-root { transition: transform 0.3s ease-in-out; } } -/* ✅ Toast Custom Style */ + +input::placeholder{ + color: #9aa3ad; +} +input:focus{ + border-color: var(--primary); + box-shadow: 0 6px 20px rgba(0,120,212,0.10); + transform: translateZ(0); +} + .ngx-toastr { border-radius: 8px !important; backdrop-filter: blur(6px);