From 2f497f1c7b609801aa25634545633e7e17613aa9 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 10 Jul 2018 11:55:04 +0300 Subject: [PATCH] (Navbar) Improved navbar style1 variant --- .../vertical/style-1/style-1.component.html | 56 +++--- .../vertical/style-1/style-1.component.scss | 165 ++++++++++-------- .../vertical/style-1/style-1.component.ts | 11 ++ 3 files changed, 130 insertions(+), 102 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 3383b780..bd5b3079 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,41 +1,43 @@ +
-
+
-
+
+ + + +
+ + + + + +
- -
+
- - - +
Charlie Adams
+ +
+ +
-
- -
- -
-
-
Charlie Adams
- - +
+
- -
- -
\ 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 4d395857..e4d4d61e 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,43 +9,50 @@ fuse-sidebar { navbar-vertical-style-1 { - .navbar-header { + .navbar-wrapper { - .top { - padding: 12px 0 0 0; - justify-content: center; + .navbar-header { - .buttons { - display: none; + .top { + 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 { - width: 32px; - height: 32px; + .avatar-container { + position: relative; + top: auto; + padding: 0; + + .avatar { + width: 40px; + height: 40px; + } + } + + .username, + .email { + display: none; } } } - .user { - - .avatar-container { - - .avatar { - width: 40px; - height: 40px; - } - - .avatar-circle { - display: none; - } - } - - .username, - .email { - display: none; - } + .navbar-content { + margin-top: 0; } } } @@ -61,71 +68,79 @@ navbar { width: 100%; height: 100%; - .navbar-header { - 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; + .navbar-wrapper { + overflow: hidden; - .top { + @include media-breakpoint-down('md') { + overflow: auto; + } + + .navbar-header { display: flex; - flex: 1 1 auto; - width: 100%; + flex-direction: column; + align-items: center; justify-content: space-between; - align-items: center; - padding: 12px 12px 0 16px; + flex: 1 0 auto; + 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 { - width: 24px; - height: 24px; + .logo { + display: flex; + align-items: center; + + .logo-icon { + width: 24px; + height: 24px; + } + } + + .buttons { + display: flex; + align-items: center; } } - .buttons { - display: flex; - align-items: center; - } - } - - .user { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 24px 0; - - .avatar-container { + .user { position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + padding: 24px 0 64px 0; - .avatar { - width: 80px; - height: 80px; - margin: 0; - } - - .avatar-circle { + .avatar-container { position: absolute; - top: -6px; - left: -6px; - width: 92px; - height: 92px; + top: 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 { - flex: 1 1 auto; - overflow-y: auto; + .navbar-content { + flex: 1 1 auto; + overflow-y: auto; + margin-top: 48px; + height: calc(100vh - 236px); + + @include media-breakpoint-down('md') { + height: auto; + } + } } } diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts index 805102a8..f6aeca04 100644 --- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts +++ b/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(