57 lines
2.4 KiB
HTML
57 lines
2.4 KiB
HTML
<div
|
|
[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">
|
|
<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 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"
|
|
(click)="navigate('/main/dashboard')">
|
|
<i class="fas fa-tachometer-alt text-xl group-hover:scale-110 transition-transform"></i>
|
|
<span *ngIf="isOpen" class="text-lg font-medium">Dashboard</span>
|
|
</li>
|
|
<!--
|
|
<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"
|
|
(click)="navigate('/main/profile')">
|
|
<i class="fas fa-user-circle text-xl group-hover:scale-110 transition-transform"></i>
|
|
<span *ngIf="isOpen" class="text-lg font-medium">Profile</span>
|
|
</li> -->
|
|
|
|
<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"
|
|
(click)="navigate('/main/report')">
|
|
<i class="fas fa-chart-bar text-xl group-hover:scale-110 transition-transform"></i>
|
|
<span *ngIf="isOpen" class="text-lg font-medium">Report</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-auto p-2">
|
|
<ul class="flex flex-col">
|
|
<li class="group flex items-center gap-3 p-3 rounded-lg cursor-pointer
|
|
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>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|