mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +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-button class="mb-16" value="right">Right</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
<!-- TOOLBAR -->
|
||||||
|
|
@ -91,6 +102,11 @@
|
||||||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
|
|
@ -109,6 +125,11 @@
|
||||||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
@ -146,6 +167,17 @@
|
||||||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
<!-- TOOLBAR -->
|
||||||
|
|
@ -164,6 +196,11 @@
|
||||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
|
|
@ -182,6 +219,11 @@
|
||||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
@ -219,6 +261,17 @@
|
||||||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
<!-- TOOLBAR -->
|
||||||
|
|
@ -236,6 +289,11 @@
|
||||||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
|
|
@ -253,6 +311,11 @@
|
||||||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
@ -285,6 +348,17 @@
|
||||||
<mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
|
<mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
<!-- TOOLBAR -->
|
||||||
|
|
@ -302,6 +376,11 @@
|
||||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
|
|
@ -319,6 +398,11 @@
|
||||||
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
||||||
</mat-radio-group>
|
</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>
|
</div>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
@ -338,35 +422,6 @@
|
||||||
|
|
||||||
</div>
|
</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>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -73,11 +73,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colors {
|
|
||||||
display: block !important;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -65,20 +65,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
style : new FormControl(),
|
style : new FormControl(),
|
||||||
width : new FormControl(),
|
width : new FormControl(),
|
||||||
navbar : this._formBuilder.group({
|
navbar : this._formBuilder.group({
|
||||||
|
background: new FormControl(),
|
||||||
|
folded : new FormControl(),
|
||||||
hidden : new FormControl(),
|
hidden : new FormControl(),
|
||||||
position : new FormControl(),
|
position : new FormControl(),
|
||||||
folded : new FormControl(),
|
variant : new FormControl()
|
||||||
background: new FormControl()
|
|
||||||
}),
|
}),
|
||||||
toolbar: this._formBuilder.group({
|
toolbar: this._formBuilder.group({
|
||||||
|
background: new FormControl(),
|
||||||
hidden : new FormControl(),
|
hidden : new FormControl(),
|
||||||
position : new FormControl(),
|
position : new FormControl()
|
||||||
background: new FormControl()
|
|
||||||
}),
|
}),
|
||||||
footer : this._formBuilder.group({
|
footer : this._formBuilder.group({
|
||||||
|
background: new FormControl(),
|
||||||
hidden : new FormControl(),
|
hidden : new FormControl(),
|
||||||
position : new FormControl(),
|
position : new FormControl()
|
||||||
background: new FormControl()
|
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
customScrollbars: new FormControl()
|
customScrollbars: new FormControl()
|
||||||
|
|
@ -174,20 +175,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
layout: {
|
layout: {
|
||||||
width : 'fullwidth',
|
width : 'fullwidth',
|
||||||
navbar : {
|
navbar : {
|
||||||
|
background: 'mat-fuse-dark-700-bg',
|
||||||
|
folded : false,
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'left',
|
position : 'left',
|
||||||
folded : false,
|
variant : 'vertical-style-1'
|
||||||
background: 'mat-fuse-dark-700-bg'
|
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
|
background: 'mat-white-500-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'below-static',
|
position : 'below-static'
|
||||||
background: 'mat-white-500-bg'
|
|
||||||
},
|
},
|
||||||
footer : {
|
footer : {
|
||||||
|
background: 'mat-fuse-dark-900-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'below-static',
|
position : 'below-static'
|
||||||
background: 'mat-fuse-dark-900-bg'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -202,20 +204,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
layout: {
|
layout: {
|
||||||
width : 'fullwidth',
|
width : 'fullwidth',
|
||||||
navbar : {
|
navbar : {
|
||||||
|
background: 'mat-fuse-dark-700-bg',
|
||||||
|
folded : false,
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'left',
|
position : 'left',
|
||||||
folded : false,
|
variant : 'vertical-style-1'
|
||||||
background: 'mat-fuse-dark-700-bg'
|
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
|
background: 'mat-white-500-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'below',
|
position : 'below'
|
||||||
background: 'mat-white-500-bg'
|
|
||||||
},
|
},
|
||||||
footer : {
|
footer : {
|
||||||
|
background: 'mat-fuse-dark-900-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'below',
|
position : 'below'
|
||||||
background: 'mat-fuse-dark-900-bg'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -230,20 +233,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
layout: {
|
layout: {
|
||||||
width : 'fullwidth',
|
width : 'fullwidth',
|
||||||
navbar : {
|
navbar : {
|
||||||
|
background: 'mat-fuse-dark-700-bg',
|
||||||
|
folded : false,
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'left',
|
position : 'left',
|
||||||
folded : false,
|
layout : 'vertical-style-1'
|
||||||
background: 'mat-fuse-dark-700-bg'
|
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
|
background: 'mat-white-500-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'above-static',
|
position : 'above-static'
|
||||||
background: 'mat-white-500-bg'
|
|
||||||
},
|
},
|
||||||
footer : {
|
footer : {
|
||||||
|
background: 'mat-fuse-dark-900-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'above-static',
|
position : 'above-static'
|
||||||
background: 'mat-fuse-dark-900-bg'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -258,20 +262,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
layout: {
|
layout: {
|
||||||
width : 'fullwidth',
|
width : 'fullwidth',
|
||||||
navbar : {
|
navbar : {
|
||||||
|
background: 'mat-fuse-dark-700-bg',
|
||||||
|
folded : false,
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'top',
|
position : 'top',
|
||||||
folded : false,
|
variant : 'vertical-style-1'
|
||||||
background: 'mat-fuse-dark-700-bg'
|
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
|
background: 'mat-white-500-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'above',
|
position : 'above'
|
||||||
background: 'mat-white-500-bg'
|
|
||||||
},
|
},
|
||||||
footer : {
|
footer : {
|
||||||
|
background: 'mat-fuse-dark-900-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'above-fixed',
|
position : 'above-fixed'
|
||||||
background: 'mat-fuse-dark-900-bg'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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,
|
style: string,
|
||||||
width: 'fullwidth' | 'boxed',
|
width: 'fullwidth' | 'boxed',
|
||||||
navbar: {
|
navbar: {
|
||||||
|
background: string,
|
||||||
hidden: boolean,
|
hidden: boolean,
|
||||||
folded: boolean,
|
folded: boolean,
|
||||||
position: 'left' | 'right' | 'top',
|
position: 'left' | 'right' | 'top',
|
||||||
background: string
|
variant: string
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
|
background: string,
|
||||||
hidden: boolean,
|
hidden: boolean,
|
||||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||||
background: string
|
|
||||||
}
|
}
|
||||||
footer: {
|
footer: {
|
||||||
|
background: string,
|
||||||
hidden: boolean,
|
hidden: boolean,
|
||||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||||
background: string
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
customScrollbars: boolean;
|
customScrollbars: boolean;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -21,6 +23,10 @@
|
||||||
opacity: .90;
|
opacity: .90;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
|
|
||||||
|
@include media-breakpoint-down('md') {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
mat-icon {
|
mat-icon {
|
||||||
animation: rotating 3s linear infinite;
|
animation: rotating 3s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,20 +13,21 @@ export const fuseConfig: FuseConfig = {
|
||||||
style : 'vertical-layout-1',
|
style : 'vertical-layout-1',
|
||||||
width : 'fullwidth',
|
width : 'fullwidth',
|
||||||
navbar : {
|
navbar : {
|
||||||
|
background: 'mat-fuse-dark-700-bg',
|
||||||
|
folded : false,
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'left',
|
position : 'left',
|
||||||
folded : false,
|
variant : 'vertical-style-2'
|
||||||
background: 'mat-fuse-dark-700-bg'
|
|
||||||
},
|
},
|
||||||
toolbar : {
|
toolbar: {
|
||||||
|
background: 'mat-white-500-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'below-static',
|
position : 'below-static'
|
||||||
background: 'mat-white-500-bg'
|
|
||||||
},
|
},
|
||||||
footer : {
|
footer : {
|
||||||
|
background: 'mat-fuse-dark-900-bg',
|
||||||
hidden : false,
|
hidden : false,
|
||||||
position : 'below-fixed',
|
position : 'below-fixed'
|
||||||
background: 'mat-fuse-dark-900-bg'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
customScrollbars: true
|
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'">
|
<ng-container *ngIf="variant === 'horizontal-style-1'">
|
||||||
|
<navbar-horizontal-style-1></navbar-horizontal-style-1>
|
||||||
<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>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngIf="layout == 'horizontal'">
|
<ng-container *ngIf="variant === 'vertical-style-1'">
|
||||||
|
<navbar-vertical-style-1></navbar-vertical-style-1>
|
||||||
<div class="navbar-horizontal">
|
</ng-container>
|
||||||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
|
||||||
</div>
|
<ng-container *ngIf="variant === 'vertical-style-2'">
|
||||||
|
<navbar-vertical-style-2></navbar-vertical-style-2>
|
||||||
</ng-container>
|
</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 {
|
navbar {
|
||||||
|
|
||||||
&:not(.top-navbar) {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-vertical {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
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 { Component, Input, 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({
|
@Component({
|
||||||
selector : 'navbar',
|
selector : 'navbar',
|
||||||
|
|
@ -13,148 +6,18 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||||
styleUrls : ['./navbar.component.scss'],
|
styleUrls : ['./navbar.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class NavbarComponent implements OnInit, OnDestroy
|
export class NavbarComponent
|
||||||
{
|
{
|
||||||
// Layout
|
// Variant
|
||||||
@Input()
|
@Input()
|
||||||
layout;
|
variant;
|
||||||
|
|
||||||
fusePerfectScrollbarUpdateTimeout: any;
|
|
||||||
navigation: any;
|
|
||||||
|
|
||||||
// Private
|
|
||||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
|
||||||
private _unsubscribeAll: Subject<any>;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructor
|
* Constructor
|
||||||
*
|
|
||||||
* @param {FuseNavigationService} _fuseNavigationService
|
|
||||||
* @param {FuseSidebarService} _fuseSidebarService
|
|
||||||
* @param {Router} _router
|
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor()
|
||||||
private _fuseNavigationService: FuseNavigationService,
|
|
||||||
private _fuseSidebarService: FuseSidebarService,
|
|
||||||
private _router: Router
|
|
||||||
)
|
|
||||||
{
|
{
|
||||||
// Set the defaults
|
// Set the defaults
|
||||||
this.layout = 'vertical';
|
this.variant = 'vertical-style-1';
|
||||||
|
|
||||||
// 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();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,22 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
|
||||||
|
|
||||||
import { FuseNavigationModule } from '@fuse/components';
|
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
|
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({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
NavbarComponent
|
NavbarComponent
|
||||||
],
|
],
|
||||||
imports : [
|
imports : [
|
||||||
MatButtonModule,
|
|
||||||
MatIconModule,
|
|
||||||
|
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseNavigationModule
|
|
||||||
|
NavbarHorizontalStyle1Module,
|
||||||
|
NavbarVerticalStyle1Module,
|
||||||
|
NavbarVerticalStyle2Module
|
||||||
],
|
],
|
||||||
exports : [
|
exports : [
|
||||||
NavbarComponent
|
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 -->
|
<!-- TOP NAVBAR -->
|
||||||
<ng-template #topNavbar>
|
<ng-template #topNavbar>
|
||||||
<navbar layout="horizontal"
|
<navbar variant="horizontal-style-1"
|
||||||
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
|
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
|
||||||
fxHide fxShow.gt-md
|
fxHide fxShow.gt-md
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||||
|
|
@ -102,7 +102,8 @@
|
||||||
<fuse-sidebar name="navbar"
|
<fuse-sidebar name="navbar"
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / LEFT NAVBAR -->
|
<!-- / LEFT NAVBAR -->
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,8 @@
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
lockedOpen="gt-md"
|
lockedOpen="gt-md"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / LEFT NAVBAR -->
|
<!-- / LEFT NAVBAR -->
|
||||||
|
|
@ -116,7 +117,8 @@
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
lockedOpen="gt-md"
|
lockedOpen="gt-md"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / RIGHT NAVBAR -->
|
<!-- / RIGHT NAVBAR -->
|
||||||
|
|
@ -105,7 +105,8 @@
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
lockedOpen="gt-md"
|
lockedOpen="gt-md"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / LEFT NAVBAR -->
|
<!-- / LEFT NAVBAR -->
|
||||||
|
|
@ -116,7 +117,8 @@
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
lockedOpen="gt-md"
|
lockedOpen="gt-md"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / RIGHT NAVBAR -->
|
<!-- / RIGHT NAVBAR -->
|
||||||
|
|
@ -91,7 +91,8 @@
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
lockedOpen="gt-md"
|
lockedOpen="gt-md"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / LEFT NAVBAR -->
|
<!-- / LEFT NAVBAR -->
|
||||||
|
|
@ -102,7 +103,8 @@
|
||||||
[folded]="fuseConfig.layout.navbar.folded"
|
[folded]="fuseConfig.layout.navbar.folded"
|
||||||
lockedOpen="gt-md"
|
lockedOpen="gt-md"
|
||||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
*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>
|
</fuse-sidebar>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<!-- / RIGHT NAVBAR -->
|
<!-- / RIGHT NAVBAR -->
|
||||||
Loading…
Reference in New Issue
Block a user