diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html
index c6a6cc75..00a10741 100644
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -73,6 +73,17 @@
Right
+ Variant:
+
+ Style 1
+ Style 2
+
+
+ Color:
+
+
+
@@ -91,6 +102,11 @@
Below Fixed
+ Color:
+
+
+
@@ -109,6 +125,11 @@
Below Fixed
+ Color:
+
+
+
@@ -146,6 +167,17 @@
Right
+ Variant:
+
+ Style 1
+ Style 2
+
+
+ Color:
+
+
+
@@ -164,6 +196,11 @@
Below
+ Color:
+
+
+
@@ -182,6 +219,11 @@
Below
+ Color:
+
+
+
@@ -219,6 +261,17 @@
Right
+ Variant:
+
+ Style 1
+ Style 2
+
+
+ Color:
+
+
+
@@ -236,6 +289,11 @@
Above Fixed
+ Color:
+
+
+
@@ -253,6 +311,11 @@
Above Fixed
+ Color:
+
+
+
@@ -285,6 +348,17 @@
Top
+ Variant (Vertical):
+
+ Style 1
+ Style 2
+
+
+ Color:
+
+
+
@@ -302,6 +376,11 @@
Below
+ Color:
+
+
+
@@ -319,6 +398,11 @@
Above Static
+ Color:
+
+
+
@@ -338,35 +422,6 @@
-
-
-
-
Colors
-
-
-
-
-
Toolbar Color
-
-
-
-
-
Navbar Color
-
-
-
-
-
Footer Color
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
diff --git a/src/app/layout/components/navbar/navbar.component.scss b/src/app/layout/components/navbar/navbar.component.scss
index fc111989..e7408888 100644
--- a/src/app/layout/components/navbar/navbar.component.scss
+++ b/src/app/layout/components/navbar/navbar.component.scss
@@ -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);
- }
- }
- }
+ display: flex;
+ flex-direction: column;
+ width: 100%;
}
diff --git a/src/app/layout/components/navbar/navbar.component.ts b/src/app/layout/components/navbar/navbar.component.ts
index e4424f8a..c9544269 100644
--- a/src/app/layout/components/navbar/navbar.component.ts
+++ b/src/app/layout/components/navbar/navbar.component.ts
@@ -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;
+ 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';
}
}
diff --git a/src/app/layout/components/navbar/navbar.module.ts b/src/app/layout/components/navbar/navbar.module.ts
index acb91738..67005f0f 100644
--- a/src/app/layout/components/navbar/navbar.module.ts
+++ b/src/app/layout/components/navbar/navbar.module.ts
@@ -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
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
new file mode 100644
index 00000000..601617f3
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
@@ -0,0 +1,23 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
new file mode 100644
index 00000000..348a7bad
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -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);
+ }
+ }
+ }
+}
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
new file mode 100644
index 00000000..805102a8
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
@@ -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;
+
+ /**
+ * 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();
+ }
+}
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.module.ts b/src/app/layout/components/navbar/vertical/style-1/style-1.module.ts
new file mode 100644
index 00000000..f452e93f
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.module.ts
@@ -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
+{
+}
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.html b/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
new file mode 100644
index 00000000..5bd4611a
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
@@ -0,0 +1,35 @@
+
+
+Style 2
+
+
+
+
\ No newline at end of file
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
new file mode 100644
index 00000000..f829924f
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
@@ -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);
+ }
+ }
+ }
+}
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
new file mode 100644
index 00000000..29e4f440
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
@@ -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;
+
+ /**
+ * 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();
+ }
+}
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.module.ts b/src/app/layout/components/navbar/vertical/style-2/style-2.module.ts
new file mode 100644
index 00000000..4968641b
--- /dev/null
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.module.ts
@@ -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
+{
+}
diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html
index 5bef4f42..7b80c4d4 100644
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -89,7 +89,7 @@
-
@@ -102,7 +102,8 @@
-
+
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html
index b8a5e19a..9a7ff897 100644
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -105,7 +105,8 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
-
+
@@ -116,7 +117,8 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
-
+
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html
index 9f57af55..3b9aa221 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -105,7 +105,8 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
-
+
@@ -116,7 +117,8 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
-
+
\ No newline at end of file
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html
index 3b31bd0d..fe908e44 100644
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -91,7 +91,8 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
-
+
@@ -102,7 +103,8 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
-
+
\ No newline at end of file
- FUSE
-