(Navbar) Improved navbar style1 variant

src/app/layout/components/navbar/vertical/style-1/style-1.component.html

@@ -1,41 +1,43 @@
+<div class="navbar-wrapper" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
 
-<div class="navbar-header adaptive-border-color">
+    <div class="navbar-header mat-indigo-700-bg">
 
-    <div class="top">
+        <div class="top">
+
+            <div class="logo">
+                <img class="logo-icon" src="assets/images/logos/fuse.svg">
+            </div>
+
+            <div class="buttons">
+
+                <button mat-icon-button class="toggle-sidebar-folded"
+                        (click)="toggleSidebarFolded()" fxHide.lt-lg>
+                    <mat-icon class="secondary-text">menu</mat-icon>
+                </button>
+
+                <button mat-icon-button class="toggle-sidebar-opened"
+                        (click)="toggleSidebarOpened()" fxHide.gt-md>
+                    <mat-icon class="secondary-text">arrow_back</mat-icon>
+                </button>
+
+            </div>
 
-        <div class="logo">
-            <img class="logo-icon" src="assets/images/logos/fuse.svg">
         </div>
 
-        <div class="buttons">
+        <div class="user" fxLayout="column">
 
-            <button mat-icon-button class="toggle-sidebar-folded"
+            <div class="h3 username">Charlie Adams</div>
-                    (click)="toggleSidebarFolded()" fxHide.lt-lg>
+            <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
-                <mat-icon class="secondary-text">menu</mat-icon>
+            <div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
-            </button>
+                <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
-
+            </div>
-            <button mat-icon-button class="toggle-sidebar-opened"
-                    (click)="toggleSidebarOpened()" fxHide.gt-md>
-                <mat-icon class="secondary-text">arrow_back</mat-icon>
-            </button>
 
         </div>
 
     </div>
 
-    <div class="user" fxLayout="column">
+    <div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
-
+        <fuse-navigation layout="vertical"></fuse-navigation>
-        <div class="avatar-container">
-            <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
-            <div class="avatar-circle"></div>
-        </div>
-        <div class="h3 username mt-32">Charlie Adams</div>
-        <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
-
     </div>
 
 </div>
-
-<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
-    <fuse-navigation layout="vertical"></fuse-navigation>
-</div>

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -9,43 +9,50 @@ fuse-sidebar {
 
             navbar-vertical-style-1 {
 
-                .navbar-header {
+                .navbar-wrapper {
 
-                    .top {
+                    .navbar-header {
-                        padding: 12px 0 0 0;
-                        justify-content: center;
 
-                        .buttons {
+                        .top {
-                            display: none;
+                            padding: 12px 0 0 0;
+                            justify-content: center;
+
+                            .buttons {
+                                display: none;
+                            }
+
+                            .logo {
+
+                                .logo-icon {
+                                    width: 32px;
+                                    height: 32px;
+                                }
+                            }
                         }
 
-                        .logo {
+                        .user {
+                            padding-bottom: 24px;
 
-                            .logo-icon {
+                            .avatar-container {
-                                width: 32px;
+                                position: relative;
-                                height: 32px;
+                                top: auto;
+                                padding: 0;
+
+                                .avatar {
+                                    width: 40px;
+                                    height: 40px;
+                                }
+                            }
+
+                            .username,
+                            .email {
+                                display: none;
                             }
                         }
                     }
 
-                    .user {
+                    .navbar-content {
-
+                        margin-top: 0;
-                        .avatar-container {
-
-                            .avatar {
-                                width: 40px;
-                                height: 40px;
-                            }
-
-                            .avatar-circle {
-                                display: none;
-                            }
-                        }
-
-                        .username,
-                        .email {
-                            display: none;
-                        }
                     }
                 }
             }
@@ -61,71 +68,79 @@ navbar {
         width: 100%;
         height: 100%;
 
-        .navbar-header {
+        .navbar-wrapper {
-            display: flex;
+            overflow: hidden;
-            flex-direction: column;
-            align-items: center;
-            justify-content: space-between;
-            flex: 1 0 auto;
-            background: rgba(0, 0, 0, 0.12);
-            transition: padding 200ms ease;
 
-            .top {
+            @include media-breakpoint-down('md') {
+                overflow: auto;
+            }
+
+            .navbar-header {
                 display: flex;
-                flex: 1 1 auto;
+                flex-direction: column;
-                width: 100%;
+                align-items: center;
                 justify-content: space-between;
-                align-items: center;
+                flex: 1 0 auto;
-                padding: 12px 12px 0 16px;
+                background: rgba(0, 0, 0, 0.12);
+                transition: padding 200ms ease;
 
-                .logo {
+                .top {
                     display: flex;
+                    flex: 1 1 auto;
+                    width: 100%;
+                    justify-content: space-between;
                     align-items: center;
+                    padding: 12px 12px 0 16px;
 
-                    .logo-icon {
+                    .logo {
-                        width: 24px;
+                        display: flex;
-                        height: 24px;
+                        align-items: center;
+
+                        .logo-icon {
+                            width: 24px;
+                            height: 24px;
+                        }
+                    }
+
+                    .buttons {
+                        display: flex;
+                        align-items: center;
                     }
                 }
 
-                .buttons {
+                .user {
-                    display: flex;
-                    align-items: center;
-                }
-            }
-
-            .user {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                padding: 24px 0;
-
-                .avatar-container {
                     position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    width: 100%;
+                    padding: 24px 0 64px 0;
 
-                    .avatar {
+                    .avatar-container {
-                        width: 80px;
-                        height: 80px;
-                        margin: 0;
-                    }
-
-                    .avatar-circle {
                         position: absolute;
-                        top: -6px;
+                        top: 92px;
-                        left: -6px;
-                        width: 92px;
-                        height: 92px;
                         border-radius: 50%;
-                        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.54);
+                        padding: 8px;
+
+                        .avatar {
+                            width: 72px;
+                            height: 72px;
+                            margin: 0;
+                        }
                     }
                 }
             }
-        }
 
-        .navbar-content {
+            .navbar-content {
-            flex: 1 1 auto;
+                flex: 1 1 auto;
-            overflow-y: auto;
+                overflow-y: auto;
+                margin-top: 48px;
+                height: calc(100vh - 236px);
+
+                @include media-breakpoint-down('md') {
+                    height: auto;
+                }
+            }
         }
     }
 

src/app/layout/components/navbar/vertical/style-1/style-1.component.ts

@@ -3,6 +3,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { filter, take, takeUntil } from 'rxjs/operators';
 
+import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@@ -15,6 +16,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 })
 export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
 {
+    fuseConfig: any;
     fusePerfectScrollbarUpdateTimeout: any;
     navigation: any;
 
@@ -25,11 +27,13 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {Router} _router
      */
     constructor(
+        private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
         private _fuseSidebarService: FuseSidebarService,
         private _router: Router
@@ -108,6 +112,13 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
                 }
             );
 
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.fuseConfig = config;
+            });
+
         // Get current navigation
         this._fuseNavigationService.onNavigationChanged
             .pipe(