66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<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'">
|
|
|
|
<button
|
|
(click)="toggleSidebar()"
|
|
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">
|
|
Global Sidebar
|
|
</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">
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<li class="group flex items-center gap-3 p-3 rounded-lg cursor-pointer mt-auto
|
|
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
|
|
*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> -->
|
|
|
|
|
|
|