purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 07:53:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Navbar) Improved navbar style1 variant

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-10 11:55:04 +03:00
parent 18009c9275
commit 2f497f1c7b
3 changed files with 130 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"
(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 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>
<div class="user" fxLayout="column">
<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 class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>
</div>
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

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

@ -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;
}
}
}
}

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

@ -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(