(Navbar) Improved navbar style1 variant

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

@@ -1,5 +1,6 @@
+<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">
 
@@ -25,17 +26,18 @@
 
         <div class="user" fxLayout="column">
 
-        <div class="avatar-container">
+            <div class="h3 username">Charlie Adams</div>
-            <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 class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
+                <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
+            </div>
 
         </div>
 
-</div>
+    </div>
 
-<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
         <fuse-navigation layout="vertical"></fuse-navigation>
+    </div>
+
 </div>

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

@@ -9,6 +9,8 @@ fuse-sidebar {
 
             navbar-vertical-style-1 {
 
+                .navbar-wrapper {
+
                     .navbar-header {
 
                         .top {
@@ -29,17 +31,17 @@ fuse-sidebar {
                         }
 
                         .user {
+                            padding-bottom: 24px;
 
                             .avatar-container {
+                                position: relative;
+                                top: auto;
+                                padding: 0;
 
                                 .avatar {
                                     width: 40px;
                                     height: 40px;
                                 }
-
-                            .avatar-circle {
-                                display: none;
-                            }
                             }
 
                             .username,
@@ -48,6 +50,11 @@ fuse-sidebar {
                             }
                         }
                     }
+
+                    .navbar-content {
+                        margin-top: 0;
+                    }
+                }
             }
         }
     }
@@ -61,6 +68,13 @@ navbar {
         width: 100%;
         height: 100%;
 
+        .navbar-wrapper {
+            overflow: hidden;
+
+            @include media-breakpoint-down('md') {
+                overflow: auto;
+            }
+
             .navbar-header {
                 display: flex;
                 flex-direction: column;
@@ -95,30 +109,24 @@ navbar {
                 }
 
                 .user {
+                    position: relative;
                     display: flex;
                     align-items: center;
-                justify-content: center;
+                    justify-content: flex-start;
                     width: 100%;
-                padding: 24px 0;
+                    padding: 24px 0 64px 0;
 
                     .avatar-container {
-                    position: relative;
+                        position: absolute;
+                        top: 92px;
+                        border-radius: 50%;
+                        padding: 8px;
 
                         .avatar {
-                        width: 80px;
+                            width: 72px;
-                        height: 80px;
+                            height: 72px;
                             margin: 0;
                         }
-
-                    .avatar-circle {
-                        position: absolute;
-                        top: -6px;
-                        left: -6px;
-                        width: 92px;
-                        height: 92px;
-                        border-radius: 50%;
-                        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.54);
-                    }
                     }
                 }
             }
@@ -126,6 +134,13 @@ navbar {
             .navbar-content {
                 flex: 1 1 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(