purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +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

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

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

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

@ -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;
height: 80px;
width: 72px;
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;
}
}
}
}

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(