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

src/app/app.component.html

@@ -19,7 +19,7 @@
       <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>
@@ -27,7 +27,7 @@
       <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" />

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();
     }
   }