Fix toggle issues in sidenav (pinning and on page refresh)

Ride-The-Lightning · Dec 6, 2023 · fc0409c · fc0409c
1 parent 9992044
commit fc0409c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -19,15 +19,15 @@
       <rtl-top-menu />
     </div>
   </mat-toolbar>
-  <mat-sidenav-container>
+  <mat-sidenav-container (backdropClick)="backdropClicked()">
     <mat-sidenav #sideNavigation class="sidenav mat-elevation-z6" [perfectScrollbar] [opened]="flgSideNavOpened && flgLoggedIn" [mode]="(flgSidenavPinned && !smallScreen) ? 'side' : 'over'">
       <rtl-side-navigation fxFlex="100" (ChildNavClicked)="onNavigationClicked($event)" />
     </mat-sidenav>
     <mat-sidenav-content #sideNavContent [perfectScrollbar]>
       <div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
         <router-outlet #outlet="outlet" />
       </div>
-    </mat-sidenav-content>>
+    </mat-sidenav-content>
   </mat-sidenav-container>
   <div *ngIf="!settings.themeColor" class="rtl-spinner">
     <mat-spinner color="accent" />

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -159,7 +159,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
-    if (this.smallScreen || !this.flgLoggedIn) { this.sideNavigation.close(); }
+    if (this.smallScreen || !this.flgLoggedIn) {
+      this.flgSideNavOpened = !this.flgSideNavOpened;
+      this.sideNavigation.close();
+    }
     this.commonService.setContainerSize(this.sideNavContent.elementRef.nativeElement.clientWidth, this.sideNavContent.elementRef.nativeElement.clientHeight);
   }
 
@@ -170,6 +173,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
   onNavigationClicked(event: any) {
     if (this.smallScreen) {
+      this.flgSideNavOpened = !this.flgSideNavOpened;
+      this.sideNavigation.close();
+    }
+  }
+
+  backdropClicked() {
+    if (!this.flgSidenavPinned || this.smallScreen) {
+      this.flgSideNavOpened = !this.flgSideNavOpened;
       this.sideNavigation.close();
     }
   }