mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-04 15:41:37 +00:00
93 lines
3.6 KiB
HTML
93 lines
3.6 KiB
HTML
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
|
|
|
<mat-drawer-container class="flex-auto h-full">
|
|
|
|
<!-- Drawer -->
|
|
<mat-drawer
|
|
class="sm:w-96 dark:bg-gray-900"
|
|
[autoFocus]="false"
|
|
[mode]="drawerMode"
|
|
[opened]="drawerOpened"
|
|
#drawer>
|
|
<!-- Title -->
|
|
<div class="m-8 sm:my-10 text-4xl font-extrabold tracking-tight leading-none">Settings</div>
|
|
<!-- Panel links -->
|
|
<div class="flex flex-col divide-y border-t border-b">
|
|
<ng-container *ngFor="let panel of panels; trackBy: trackByFn">
|
|
<div
|
|
class="flex px-8 py-5 cursor-pointer"
|
|
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedPanel || selectedPanel !== panel.id,
|
|
'bg-primary-50 dark:bg-hover': selectedPanel && selectedPanel === panel.id}"
|
|
(click)="selectedPanel = panel.id; drawer.close()">
|
|
<mat-icon
|
|
[ngClass]="{'text-hint': !selectedPanel || selectedPanel !== panel.id,
|
|
'text-primary dark:text-primary-500': selectedPanel && selectedPanel === panel.id}"
|
|
[svgIcon]="panel.icon"></mat-icon>
|
|
<div class="ml-3">
|
|
<div
|
|
class="font-medium leading-6"
|
|
[ngClass]="{'text-primary dark:text-primary-500': selectedPanel && selectedPanel === panel.id}">
|
|
{{panel.title}}
|
|
</div>
|
|
<div class="mt-0.5 text-secondary">
|
|
{{panel.description}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</mat-drawer>
|
|
|
|
<!-- Drawer content -->
|
|
<mat-drawer-content class="flex flex-col">
|
|
|
|
<!-- Main -->
|
|
<div class="flex-auto p-6 md:p-8 lg:p-12">
|
|
|
|
<!-- Drawer toggle -->
|
|
<button
|
|
class="lg:hidden mb-4 -ml-2"
|
|
mat-icon-button
|
|
(click)="drawer.toggle()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
|
</button>
|
|
|
|
<!-- Load settings panel -->
|
|
<ng-container [ngSwitch]="selectedPanel">
|
|
|
|
<!-- Account -->
|
|
<ng-container *ngSwitchCase="'account'">
|
|
<settings-account></settings-account>
|
|
</ng-container>
|
|
|
|
<!-- Security -->
|
|
<ng-container *ngSwitchCase="'security'">
|
|
<settings-security></settings-security>
|
|
</ng-container>
|
|
|
|
<!-- Plan & Billing -->
|
|
<ng-container *ngSwitchCase="'plan-billing'">
|
|
<settings-plan-billing></settings-plan-billing>
|
|
</ng-container>
|
|
|
|
<!-- Notifications -->
|
|
<ng-container *ngSwitchCase="'notifications'">
|
|
<settings-notifications></settings-notifications>
|
|
</ng-container>
|
|
|
|
<!-- Team -->
|
|
<ng-container *ngSwitchCase="'team'">
|
|
<settings-team></settings-team>
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
|
|
</div>
|
|
|
|
</mat-drawer-content>
|
|
|
|
</mat-drawer-container>
|
|
|
|
</div>
|