From ac70ecc6162b9367049bfff1191d51977555dafa Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 10 Jul 2018 13:47:58 +0300
Subject: [PATCH] (Navbar) Improved the style variant 1 Updated Changelog

---
 .../vertical/style-1/style-1.component.html   |  47 +++---
 .../vertical/style-1/style-1.component.scss   | 157 ++++++++----------
 .../changelog/changelog.component.html        |  12 +-
 3 files changed, 98 insertions(+), 118 deletions(-)

diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
index bd5b3079..0e746cd6 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
@@ -1,42 +1,39 @@
-<div class="navbar-wrapper" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+<div class="navbar-top mat-indigo-700-bg">
 
-    <div class="navbar-header mat-indigo-700-bg">
+    <div class="logo">
+        <img class="logo-icon" src="assets/images/logos/fuse.svg">
+    </div>
 
-        <div class="top">
+    <div class="buttons">
 
-            <div class="logo">
-                <img class="logo-icon" src="assets/images/logos/fuse.svg">
-            </div>
+        <button mat-icon-button class="toggle-sidebar-folded"
+                (click)="toggleSidebarFolded()" fxHide.lt-lg>
+            <mat-icon class="secondary-text">menu</mat-icon>
+        </button>
 
-            <div class="buttons">
+        <button mat-icon-button class="toggle-sidebar-opened"
+                (click)="toggleSidebarOpened()" fxHide.gt-md>
+            <mat-icon class="secondary-text">arrow_back</mat-icon>
+        </button>
 
-                <button mat-icon-button class="toggle-sidebar-folded"
-                        (click)="toggleSidebarFolded()" fxHide.lt-lg>
-                    <mat-icon class="secondary-text">menu</mat-icon>
-                </button>
+    </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>
+<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
 
-        <div class="user" fxLayout="column">
-
-            <div class="h3 username">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 class="user mat-indigo-700-bg" fxLayout="column">
 
+        <div class="h3 username">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 class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <div class="navbar-content">
         <fuse-navigation layout="vertical"></fuse-navigation>
     </div>
 
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
index 3d3579a5..5629ca06 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -9,51 +9,47 @@ fuse-sidebar {
 
             navbar-vertical-style-1 {
 
-                .navbar-wrapper {
+                .navbar-top {
+                    padding: 12px 0;
+                    justify-content: center;
 
-                    .navbar-header {
+                    .buttons {
+                        display: none;
+                    }
 
-                        .top {
-                            padding: 12px 0 0 0;
-                            justify-content: center;
+                    .logo {
 
-                            .buttons {
-                                display: none;
-                            }
+                        .logo-icon {
+                            width: 32px;
+                            height: 32px;
+                        }
+                    }
+                }
 
-                            .logo {
+                .navbar-scroll-container {
 
-                                .logo-icon {
-                                    width: 32px;
-                                    height: 32px;
-                                }
+                    .user {
+                        padding: 12px 0;
+
+                        .avatar-container {
+                            position: relative;
+                            top: auto;
+                            padding: 0;
+
+                            .avatar {
+                                width: 40px;
+                                height: 40px;
                             }
                         }
 
-                        .user {
-                            padding-bottom: 24px;
-
-                            .avatar-container {
-                                position: relative;
-                                top: auto;
-                                padding: 0;
-
-                                .avatar {
-                                    width: 40px;
-                                    height: 40px;
-                                }
-                            }
-
-                            .username,
-                            .email {
-                                display: none;
-                            }
+                        .username,
+                        .email {
+                            display: none;
                         }
                     }
 
                     .navbar-content {
                         margin-top: 0;
-                        height: auto !important;
                     }
                 }
             }
@@ -69,78 +65,65 @@ navbar {
         width: 100%;
         height: 100%;
 
-        .navbar-wrapper {
-            overflow: hidden;
+        .navbar-top {
+            display: flex;
+            flex-direction: row;
+            flex: 1 0 auto;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 12px 12px 20px;
 
-            @include media-breakpoint-down('md') {
-                overflow: auto;
+            .logo {
+                display: flex;
+                align-items: center;
+
+                .logo-icon {
+                    width: 24px;
+                    height: 24px;
+                }
             }
 
-            .navbar-header {
+            .buttons {
                 display: flex;
-                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 {
-                    display: flex;
-                    flex: 1 1 auto;
-                    width: 100%;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 12px 12px 0 16px;
+        .navbar-scroll-container {
+            overflow-y: auto;
 
-                    .logo {
-                        display: flex;
-                        align-items: center;
+            background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
+            linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
 
-                        .logo-icon {
-                            width: 24px;
-                            height: 24px;
-                        }
-                    }
+            background-repeat: no-repeat;
+            background-size: 100% 40px, 100% 10px;
+            background-attachment: local, scroll;
 
-                    .buttons {
-                        display: flex;
-                        align-items: center;
-                    }
-                }
+            .user {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                width: 100%;
+                padding: 24px 0 64px 0;
 
-                .user {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-start;
-                    width: 100%;
-                    padding: 24px 0 64px 0;
+                .avatar-container {
+                    position: absolute;
+                    top: 92px;
+                    border-radius: 50%;
+                    padding: 8px;
 
-                    .avatar-container {
-                        position: absolute;
-                        top: 92px;
-                        border-radius: 50%;
-                        padding: 8px;
-
-                        .avatar {
-                            width: 72px;
-                            height: 72px;
-                            margin: 0;
-                        }
+                    .avatar {
+                        width: 72px;
+                        height: 72px;
+                        margin: 0;
                     }
                 }
             }
 
             .navbar-content {
                 flex: 1 1 auto;
-                overflow-y: auto;
-                margin-top: 48px;
-                height: calc(100vh - 236px);
-
-                @include media-breakpoint-down('md') {
-                    height: auto;
-                }
+                margin-top: 32px;
             }
         }
     }
diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html
index a103a281..23c306b7 100644
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -38,18 +38,18 @@
                             <li>Updated Angular Material to 6.3.3</li>
                             <li>Updated various other packages</li>
                             <li>Updated Angular material examples</li>
-                            <li>Chat Panel sidebar</li>
-                            <li>New style variants for the Navbar</li>
-                            <li>Added 'foldedChanged' & 'openedChanged' outputs to the FuseSidebar</li>
-                            <li>Ability to add custom classes to the navigation items</li>
-                            <li>FuseLoadingBarService for showing/hiding the loading bar easily</li>
+                            <li>New Chat Panel sidebar</li>
+                            <li>(Navbar) New style variants for the Navbar</li>
+                            <li>(FuseSidebar) Added 'foldedChanged' & 'openedChanged' outputs</li>
+                            <li>(FuseNavigation) Ability to add custom classes to the navigation items</li>
+                            <li>(FuseLoadingBarService) New service for showing/hiding the loading bar easily</li>
                         </ul>
                     </div>
 
                     <div class="improved">
                         <span class="title">Improved</span>
                         <ul>
-                            <li>Replaced cdkTable with matTable since Table is now a proper element in Material</li>
+                            <li>Replaced cdkTable with matTable since Table is now a proper component in Material</li>
                             <li>(E-Commerce) Added sticky headers to the tables</li>
                         </ul>
                     </div>