mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(Navbar) Started to adding new style variants to the navbar (wip)
This commit is contained in:
Sercan Yemen
parent
c7d9a7808a
commit
5045482ef5
|
|
@ -73,6 +73,17 @@
|
|||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -91,6 +102,11 @@
|
|||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -109,6 +125,11 @@
|
|||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -146,6 +167,17 @@
|
|||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -164,6 +196,11 @@
|
|||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -182,6 +219,11 @@
|
|||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -219,6 +261,17 @@
|
|||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -236,6 +289,11 @@
|
|||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -253,6 +311,11 @@
|
|||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -285,6 +348,17 @@
|
|||
<mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant (Vertical):</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -302,6 +376,11 @@
|
|||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -319,6 +398,11 @@
|
|||
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -338,35 +422,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- COLORS -->
|
||||
<div class="group">
|
||||
|
||||
<h2>Colors</h2>
|
||||
|
||||
<div class="colors">
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Toolbar Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Navbar Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Footer Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,11 +73,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,20 +65,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
style : new FormControl(),
|
||||
width : new FormControl(),
|
||||
navbar : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
folded : new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
folded : new FormControl(),
|
||||
background: new FormControl()
|
||||
variant : new FormControl()
|
||||
}),
|
||||
toolbar: this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
background: new FormControl()
|
||||
position : new FormControl()
|
||||
}),
|
||||
footer : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
background: new FormControl()
|
||||
position : new FormControl()
|
||||
})
|
||||
}),
|
||||
customScrollbars: new FormControl()
|
||||
|
|
@ -174,20 +175,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below-static'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -202,20 +204,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -230,20 +233,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
layout : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'above-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'above-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'above-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'above-static'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -258,20 +262,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'top',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'above',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'above'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'above-fixed',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'above-fixed'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -219,4 +219,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material style
|
||||
&.material {
|
||||
|
||||
.nav-subheader {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,21 @@ export interface FuseConfig
|
|||
style: string,
|
||||
width: 'fullwidth' | 'boxed',
|
||||
navbar: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
folded: boolean,
|
||||
position: 'left' | 'right' | 'top',
|
||||
background: string
|
||||
variant: string
|
||||
},
|
||||
toolbar: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
||||
background: string
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
}
|
||||
footer: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
||||
background: string
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
}
|
||||
};
|
||||
customScrollbars: boolean;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -21,6 +23,10 @@
|
|||
opacity: .90;
|
||||
z-index: 998;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
animation: rotating 3s linear infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,20 +13,21 @@ export const fuseConfig: FuseConfig = {
|
|||
style : 'vertical-layout-1',
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-2'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-fixed',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below-fixed'
|
||||
}
|
||||
},
|
||||
customScrollbars: true
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
navbar-horizontal-style-1 {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-horizontal-style-1',
|
||||
templateUrl : './style-1.component.html',
|
||||
styleUrls : ['./style-1.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
|
||||
{
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarHorizontalStyle1Component } from 'app/layout/components/navbar/horizontal/style-1/style-1.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarHorizontalStyle1Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarHorizontalStyle1Component
|
||||
]
|
||||
})
|
||||
export class NavbarHorizontalStyle1Module
|
||||
{
|
||||
}
|
||||
|
|
@ -1,39 +1,11 @@
|
|||
<ng-container *ngIf="layout == 'vertical'">
|
||||
|
||||
<div class="navbar-vertical">
|
||||
|
||||
<div class="navbar-header">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="variant === 'horizontal-style-1'">
|
||||
<navbar-horizontal-style-1></navbar-horizontal-style-1>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layout == 'horizontal'">
|
||||
|
||||
<div class="navbar-horizontal">
|
||||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="variant === 'vertical-style-1'">
|
||||
<navbar-vertical-style-1></navbar-vertical-style-1>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="variant === 'vertical-style-2'">
|
||||
<navbar-vertical-style-2></navbar-vertical-style-2>
|
||||
</ng-container>
|
||||
|
|
@ -1,81 +1,5 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
.navbar-vertical {
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
&:not(.top-navbar) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
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);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
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';
|
||||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar',
|
||||
|
|
@ -13,148 +6,18 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
|||
styleUrls : ['./navbar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarComponent implements OnInit, OnDestroy
|
||||
export class NavbarComponent
|
||||
{
|
||||
// Layout
|
||||
// Variant
|
||||
@Input()
|
||||
layout;
|
||||
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
variant;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
constructor()
|
||||
{
|
||||
// Set the defaults
|
||||
this.layout = 'vertical';
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(filter(value => value !== null))
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
this.variant = 'vertical-style-1';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
|
||||
import { NavbarHorizontalStyle1Module } from 'app/layout/components/navbar/horizontal/style-1/style-1.module';
|
||||
import { NavbarVerticalStyle1Module } from 'app/layout/components/navbar/vertical/style-1/style-1.module';
|
||||
import { NavbarVerticalStyle2Module } from 'app/layout/components/navbar/vertical/style-2/style-2.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarComponent
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
|
||||
NavbarHorizontalStyle1Module,
|
||||
NavbarVerticalStyle1Module,
|
||||
NavbarVerticalStyle2Module
|
||||
],
|
||||
exports : [
|
||||
NavbarComponent
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="navbar-header">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
overflow: hidden;
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
.navbar-vertical {
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
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);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-vertical-style-1',
|
||||
templateUrl : './style-1.component.html',
|
||||
styleUrls : ['./style-1.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
|
||||
{
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarVerticalStyle1Component } from 'app/layout/components/navbar/vertical/style-1/style-1.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarVerticalStyle1Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarVerticalStyle1Component
|
||||
]
|
||||
})
|
||||
export class NavbarVerticalStyle1Module
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<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>
|
||||
|
||||
<div class="navbar-header-user">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Style 2
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
overflow: hidden;
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
.navbar-vertical {
|
||||
|
||||
.navbar-header {
|
||||
|
||||
.navbar-header-top {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-header {
|
||||
|
||||
.navbar-header-top {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header-user {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-vertical-style-2',
|
||||
templateUrl : './style-2.component.html',
|
||||
styleUrls : ['./style-2.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
|
||||
{
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarVerticalStyle2Component } from 'app/layout/components/navbar/vertical/style-2/style-2.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarVerticalStyle2Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarVerticalStyle2Component
|
||||
]
|
||||
})
|
||||
export class NavbarVerticalStyle2Module
|
||||
{
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
<!-- TOP NAVBAR -->
|
||||
<ng-template #topNavbar>
|
||||
<navbar layout="horizontal"
|
||||
<navbar variant="horizontal-style-1"
|
||||
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
|
||||
fxHide fxShow.gt-md
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
|
|
@ -102,7 +102,8 @@
|
|||
<fuse-sidebar name="navbar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
|
|||
|
|
@ -105,7 +105,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
@ -116,7 +117,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
|
|
@ -105,7 +105,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
@ -116,7 +117,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
|
|
@ -91,7 +91,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
@ -102,7 +103,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
Loading…
Reference in New Issue
Block a user