(pages/settings) Fixed: Drawer shouldn't be closed on 'side' mode when changing the selected panel

This commit is contained in:
sercan 2021-05-11 13:09:38 +03:00
parent cc761d58e5
commit 57ba071fa5
2 changed files with 20 additions and 2 deletions

View File

@ -18,7 +18,7 @@
class="flex px-8 py-5 cursor-pointer" class="flex px-8 py-5 cursor-pointer"
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedPanel || selectedPanel !== panel.id, [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedPanel || selectedPanel !== panel.id,
'bg-primary-50 dark:bg-hover': selectedPanel && selectedPanel === panel.id}" 'bg-primary-50 dark:bg-hover': selectedPanel && selectedPanel === panel.id}"
(click)="selectedPanel = panel.id; drawer.close()"> (click)="goToPanel(panel.id)">
<mat-icon <mat-icon
[ngClass]="{'text-hint': !selectedPanel || selectedPanel !== panel.id, [ngClass]="{'text-hint': !selectedPanel || selectedPanel !== panel.id,
'text-primary dark:text-primary-500': selectedPanel && selectedPanel === panel.id}" 'text-primary dark:text-primary-500': selectedPanel && selectedPanel === panel.id}"

View File

@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatDrawer } from '@angular/material/sidenav';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@ -11,6 +12,7 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
}) })
export class SettingsComponent implements OnInit, OnDestroy export class SettingsComponent implements OnInit, OnDestroy
{ {
@ViewChild('drawer') drawer: MatDrawer;
drawerMode: 'over' | 'side' = 'side'; drawerMode: 'over' | 'side' = 'side';
drawerOpened: boolean = true; drawerOpened: boolean = true;
panels: any[] = []; panels: any[] = [];
@ -106,6 +108,22 @@ export class SettingsComponent implements OnInit, OnDestroy
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/**
* Navigate to the panel
*
* @param panel
*/
goToPanel(panel: string): void
{
this.selectedPanel = panel;
// Close the drawer on 'over' mode
if ( this.drawerMode === 'over' )
{
this.drawer.close();
}
}
/** /**
* Track by function for ngFor loops * Track by function for ngFor loops
* *