From 18009c927561cc3f454d146aca9f0a214e0995b4 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 9 Jul 2018 21:29:15 +0300
Subject: [PATCH] (Navbar) Finished navbar variants

---
 src/app/fuse-config/index.ts                  |   2 +-
 .../vertical/style-1/style-1.component.html   |  46 +++++---
 .../vertical/style-1/style-1.component.scss   | 109 ++++++++++++++----
 .../vertical/style-2/style-2.component.html   |  34 ++----
 .../vertical/style-2/style-2.component.scss   |  51 ++++----
 5 files changed, 153 insertions(+), 89 deletions(-)

diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts
index 1d6f9692..aac07997 100644
--- a/src/app/fuse-config/index.ts
+++ b/src/app/fuse-config/index.ts
@@ -17,7 +17,7 @@ export const fuseConfig: FuseConfig = {
             folded    : false,
             hidden    : false,
             position  : 'left',
-            variant   : 'vertical-style-2'
+            variant   : 'vertical-style-1'
         },
         toolbar: {
             background: 'mat-white-500-bg',
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 601617f3..3383b780 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,23 +1,41 @@
-<div class="navbar-header">
 
-    <div class="logo">
-        <img class="logo-icon" src="assets/images/logos/fuse.svg">
-        <span class="logo-text">FUSE</span>
+<div class="navbar-header adaptive-border-color">
+
+    <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>
 
-    <button mat-icon-button class="toggle-sidebar-folded"
-            (click)="toggleSidebarFolded()" fxHide.lt-lg>
-        <mat-icon>menu</mat-icon>
-    </button>
+    <div class="user" fxLayout="column">
 
-    <button mat-icon-button class="toggle-sidebar-opened"
-            (click)="toggleSidebarOpened()" fxHide.gt-md>
-        <mat-icon>arrow_back</mat-icon>
-    </button>
+        <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}">
+<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
     <fuse-navigation layout="vertical"></fuse-navigation>
 </div>
\ No newline at end of file
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 348a7bad..4d395857 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
@@ -5,16 +5,47 @@ fuse-sidebar {
 
     &.folded:not(.unfolded) {
 
-        .navbar-vertical {
+        navbar {
 
-            .navbar-header {
-                padding: 0 13px;
+            navbar-vertical-style-1 {
 
-                .logo {
+                .navbar-header {
 
-                    .logo-text {
-                        opacity: 0;
-                        transition: opacity 200ms ease;
+                    .top {
+                        padding: 12px 0 0 0;
+                        justify-content: center;
+
+                        .buttons {
+                            display: none;
+                        }
+
+                        .logo {
+
+                            .logo-icon {
+                                width: 32px;
+                                height: 32px;
+                            }
+                        }
+                    }
+
+                    .user {
+
+                        .avatar-container {
+
+                            .avatar {
+                                width: 40px;
+                                height: 40px;
+                            }
+
+                            .avatar-circle {
+                                display: none;
+                            }
+                        }
+
+                        .username,
+                        .email {
+                            display: none;
+                        }
                     }
                 }
             }
@@ -32,29 +63,62 @@ navbar {
 
         .navbar-header {
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: space-between;
-            height: 64px;
-            min-height: 64px;
-            padding: 0 16px 0 24px;
+            flex: 1 0 auto;
+            background: rgba(0, 0, 0, 0.12);
             transition: padding 200ms ease;
-            background-color: rgba(255, 255, 255, .05);
-            @include mat-elevation(1);
 
-            .logo {
+            .top {
                 display: flex;
+                flex: 1 1 auto;
+                width: 100%;
+                justify-content: space-between;
                 align-items: center;
+                padding: 12px 12px 0 16px;
 
-                .logo-icon {
-                    width: 38px;
-                    height: 38px;
+                .logo {
+                    display: flex;
+                    align-items: center;
+
+                    .logo-icon {
+                        width: 24px;
+                        height: 24px;
+                    }
                 }
 
-                .logo-text {
-                    margin-left: 8px;
-                    font-size: 20px;
-                    font-weight: 300;
-                    letter-spacing: 0.4px;
+                .buttons {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+
+            .user {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                padding: 24px 0;
+
+                .avatar-container {
+                    position: relative;
+
+                    .avatar {
+                        width: 80px;
+                        height: 80px;
+                        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);
+                    }
                 }
             }
         }
@@ -63,7 +127,6 @@ navbar {
             flex: 1 1 auto;
             overflow-y: auto;
         }
-
     }
 
     &.right-navbar {
@@ -75,4 +138,4 @@ navbar {
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.html b/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
index 5bd4611a..601617f3 100644
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
@@ -1,34 +1,22 @@
 <div class="navbar-header">
 
-    <div class="navbar-header-top">
-
-        <div class="logo">
-            <img class="logo-icon" src="assets/images/logos/fuse.svg">
-            <span class="logo-text">FUSE</span>
-        </div>
-
-        <button mat-icon-button class="toggle-sidebar-folded"
-                (click)="toggleSidebarFolded()" fxHide.lt-lg>
-            <mat-icon>menu</mat-icon>
-        </button>
-
-        <button mat-icon-button class="toggle-sidebar-opened"
-                (click)="toggleSidebarOpened()" fxHide.gt-md>
-            <mat-icon>arrow_back</mat-icon>
-        </button>
-
+    <div class="logo">
+        <img class="logo-icon" src="assets/images/logos/fuse.svg">
+        <span class="logo-text">FUSE</span>
     </div>
 
-    <div class="navbar-header-user">
+    <button mat-icon-button class="toggle-sidebar-folded"
+            (click)="toggleSidebarFolded()" fxHide.lt-lg>
+        <mat-icon>menu</mat-icon>
+    </button>
 
-
-
-    </div>
+    <button mat-icon-button class="toggle-sidebar-opened"
+            (click)="toggleSidebarOpened()" fxHide.gt-md>
+        <mat-icon>arrow_back</mat-icon>
+    </button>
 
 </div>
 
-Style 2
-
 <div class="navbar-content" fusePerfectScrollbar
      [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
     <fuse-navigation layout="vertical"></fuse-navigation>
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
index f829924f..d150731e 100644
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
@@ -5,11 +5,11 @@ fuse-sidebar {
 
     &.folded:not(.unfolded) {
 
-        .navbar-vertical {
+        navbar {
 
-            .navbar-header {
+            navbar-vertical-style-2 {
 
-                .navbar-header-top {
+                .navbar-header {
                     padding: 0 13px;
 
                     .logo {
@@ -34,37 +34,31 @@ navbar {
         height: 100%;
 
         .navbar-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 64px;
+            min-height: 64px;
+            padding: 0 16px 0 24px;
+            transition: padding 200ms ease;
+            background-color: rgba(255, 255, 255, .05);
+            @include mat-elevation(1);
 
-            .navbar-header-top {
+            .logo {
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
-                height: 64px;
-                min-height: 64px;
-                padding: 0 16px 0 24px;
-                transition: padding 200ms ease;
-                border-bottom: 1px solid;
 
-                .logo {
-                    display: flex;
-                    align-items: center;
-
-                    .logo-icon {
-                        width: 38px;
-                        height: 38px;
-                    }
-
-                    .logo-text {
-                        margin-left: 8px;
-                        font-size: 20px;
-                        font-weight: 300;
-                        letter-spacing: 0.4px;
-                    }
+                .logo-icon {
+                    width: 38px;
+                    height: 38px;
                 }
-            }
-
-            .navbar-header-user {
 
+                .logo-text {
+                    margin-left: 8px;
+                    font-size: 20px;
+                    font-weight: 300;
+                    letter-spacing: 0.4px;
+                }
             }
         }
 
@@ -72,6 +66,7 @@ navbar {
             flex: 1 1 auto;
             overflow-y: auto;
         }
+
     }
 
     &.right-navbar {