Refactored layout service

src/app/app-routing.module.ts

@@ -21,7 +21,7 @@ import { AppLayoutComponent } from "./layout/app.layout.component";
             { path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) },
             { path: 'pages/notfound', component: NotfoundComponent },
             { path: '**', redirectTo: 'pages/notfound' },
-        ], { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled' })
+        ], { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' })
     ],
     exports: [RouterModule]
 })

src/app/layout/app.layout.component.ts

@@ -30,41 +30,53 @@ export class AppLayoutComponent implements OnDestroy {
                         || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
                     
                     if (isOutsideClicked) {
-                        this.layoutService.state.overlayMenuActive = false;
+                        this.hideMenu();
-                        this.layoutService.state.staticMenuMobileActive = false;
-                        this.layoutService.state.menuHoverActive = false;
-                        this.menuService.reset();
-                        this.menuOutsideClickListener();
-                        this.menuOutsideClickListener = null;
-                        this.unblockBodyScroll();
-                    }
-                    else {
-                        if (this.layoutService.state.staticMenuMobileActive) {
-                            this.blockBodyScroll();
-                        }
                     }
                 });
             }
 
             if (!this.profileMenuOutsideClickListener) {
                 this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
-                    const shouldCloseProfileMenu = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
+                    const isOutsideClicked = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || this.appTopbar.menu.nativeElement.contains(event.target)
+                        || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
 
-                        if (shouldCloseProfileMenu) {
+                    if (isOutsideClicked) {
-                            this.layoutService.state.profileSidebarVisible = false;
+                        this.hideProfileMenu();
-                            this.profileMenuOutsideClickListener();
-                            this.profileMenuOutsideClickListener = null;
                     }
                 });
             }
+
+            if (this.layoutService.state.staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
         });
 
         this.router.events.pipe(filter(event => event instanceof NavigationEnd))
             .subscribe(() => {
-                this.unblockBodyScroll();
+                this.hideMenu();
+                this.hideProfileMenu();
             });
     }
 
+    hideMenu() {
+        this.layoutService.state.overlayMenuActive = false;
+        this.layoutService.state.staticMenuMobileActive = false;
+        this.layoutService.state.menuHoverActive = false;
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+
+    hideProfileMenu() {
+        this.layoutService.state.profileSidebarVisible = false;
+        if (this.profileMenuOutsideClickListener) {
+            this.profileMenuOutsideClickListener();
+            this.profileMenuOutsideClickListener = null;
+        }
+    }
+
     blockBodyScroll(): void {
         if (document.body.classList) {
             document.body.classList.add('blocked-scroll');

src/app/layout/app.menuitem.component.ts

@@ -48,12 +48,6 @@ import { LayoutService } from './service/app.layout.service';
             state('expanded', style({
                 height: '*'
             })),
-            state('hidden', style({
-                display: 'none'
-            })),
-            state('visible', style({
-                display: 'block'
-            })),
             transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
         ])
     ]
@@ -133,24 +127,12 @@ export class AppMenuitemComponent implements OnInit, OnDestroy {
         // toggle active state
         if (this.item.items) {
             this.active = !this.active;
-
-            if (this.root && this.active) {
-                this.layoutService.onOverlaySubmenuOpen();
-            }
-        }
-        else {
-            if (this.layoutService.isMobile()) {
-                this.layoutService.state.staticMenuMobileActive = false;
-            }
         }
 
         this.menuService.onMenuStateChange({ key: this.key });
     }
 
     get submenuAnimation() {
-        if (this.layoutService.isDesktop() && this.layoutService.isSlim())
-            return this.active ? 'visible' : 'hidden';
-        else
         return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
     }
 

src/app/layout/app.topbar.component.html

@@ -17,15 +17,13 @@
             <i class="pi pi-calendar"></i>
             <span>Calendar</span>
         </button>
-        
-        <button class="p-link layout-topbar-button">
-            <i class="pi pi-cog"></i>
-            <span>Settings</span>
-        </button>
-
         <button class="p-link layout-topbar-button">
             <i class="pi pi-user"></i>
             <span>Profile</span>
         </button>
+        <button class="p-link layout-topbar-button" [routerLink]="'/documentation'">
+            <i class="pi pi-cog"></i>
+            <span>Settings</span>
+        </button>
     </div>
 </div>

src/app/layout/config/app.config.component.ts

@@ -36,9 +36,6 @@ export class AppConfigComponent {
 
     set menuMode(_val: string) {
         this.layoutService.config.menuMode = _val;
-        if (this.layoutService.isSlim()) {
-            this.menuService.reset();
-        }
     }
 
     get inputStyle(): string {

src/app/layout/service/app.layout.service.ts

@@ -93,10 +93,6 @@ export class LayoutService {
         return window.innerWidth > 991;
     }
 
-    isSlim() {
-        return this.config.menuMode === 'slim';
-    }
-
     isMobile() {
         return !this.isDesktop();
     }