diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts index d7676cc3..dc2d2535 100644 --- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts +++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts @@ -17,19 +17,15 @@ export class FuseNavVerticalCollapseComponent implements OnInit constructor(private navigationService: FuseNavigationService, private router: Router) { - /** - * When navigation changed - */ + // Listen for route changes router.events.subscribe( (event) => { if ( event instanceof NavigationEnd ) { - /** - * Check if the url is child of the collapse - */ + // Check if the url can be found in + // one of the children of this item if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) ) { - // console.log(this.item); this.expand(); } else @@ -40,47 +36,46 @@ export class FuseNavVerticalCollapseComponent implements OnInit } ); - /** - * Whenever a navigation collapse item toggled - */ - this.navigationService.onNavCollapseToggled.subscribe( - (clickedItem) => { - if ( clickedItem.children ) - { - /** - * if clicked collapse is child of this collapse - * return - */ - if ( this.item.children.indexOf(clickedItem) !== -1 ) + // Listen for collapsing of any navigation item + this.navigationService.onNavCollapseToggled + .subscribe( + (clickedItem) => { + if ( clickedItem.children ) { - return; - } - /** - * If collapsed item is not related with this collapse - * collapse - */ - if ( this.item !== clickedItem ) - { - this.collapse(); + // Check if the clicked item is one + // of the children of this item + if ( this.isChildrenOf(this.item, clickedItem) ) + { + return; + } + + // If the clicked item is not this item, collapse... + if ( this.item !== clickedItem ) + { + this.collapse(); + } } } - } - ); + ); } /** - * Toggle Collapse + * Toggle collapse + * * @param ev */ toggleOpen(ev) { ev.preventDefault(); + this.isOpen = !this.isOpen; + + // Navigation collapse toggled... this.navigationService.onNavCollapseToggled.emit(this.item); } /** - * Expand + * Expand the collapsable navigation */ expand() { @@ -88,11 +83,12 @@ export class FuseNavVerticalCollapseComponent implements OnInit { return; } + this.isOpen = true; } /** - * Collapse + * Collapse the collapsable navigation */ collapse() { @@ -104,40 +100,61 @@ export class FuseNavVerticalCollapseComponent implements OnInit } /** - * Checking the url is in children - * @param arr - * @param url - * @returns {any} + * Check if the given parent has the + * given item in one of its children + * + * @param parent + * @param item + * @return {any} */ - isUrlInChildren(arr, url) + isChildrenOf(parent, item) { - if ( !arr.children ) + if ( !parent.children ) { return false; } - for ( let i = 0; i < arr.children.length; i++ ) + if ( parent.children.indexOf(item) !== -1 ) { - if ( arr.children[i].children ) - { - if ( this.isUrlInChildren(arr.children[i], url) ) - { - return true; - } - } + return true; + } - if ( arr.children[i].url === url ) + for ( const children of parent.children ) + { + if ( children.children ) + { + return this.isChildrenOf(children, item); + } + } + } + + /** + * Check if the given url can be found + * in one of the given parent's children + * + * @param parent + * @param url + * @returns {any} + */ + isUrlInChildren(parent, url) + { + if ( !parent.children ) + { + return false; + } + + for ( const children of parent.children ) + { + if ( children.url === url ) { return true; } + + if ( children.children ) + { + return this.isUrlInChildren(children, url); + } } - - return false; - } - - public isCollapsed(): boolean - { - return this.isOpen; } ngOnInit() diff --git a/src/app/core/fuseUtils.ts b/src/app/core/fuseUtils.ts index 3278c1a6..1d1763f3 100644 --- a/src/app/core/fuseUtils.ts +++ b/src/app/core/fuseUtils.ts @@ -1,6 +1,5 @@ export class FuseUtils { - public static filterArrayByString(mainArr, searchText) { if ( searchText === '' ) @@ -17,7 +16,6 @@ export class FuseUtils public static searchInObj(itemObj, searchText) { - for ( const prop in itemObj ) { if ( !itemObj.hasOwnProperty(prop) ) @@ -29,7 +27,7 @@ export class FuseUtils if ( typeof value === 'string' ) { - if ( this.searchInSting(value, searchText) ) + if ( this.searchInString(value, searchText) ) { return true; } @@ -41,7 +39,6 @@ export class FuseUtils { return true; } - } if ( typeof value === 'object' ) @@ -60,7 +57,7 @@ export class FuseUtils { if ( typeof value === 'string' ) { - if ( this.searchInSting(value, searchText) ) + if ( this.searchInString(value, searchText) ) { return true; } @@ -76,7 +73,7 @@ export class FuseUtils } } - public static searchInSting(value, searchText) + public static searchInString(value, searchText) { return value.toLowerCase().includes(searchText); } diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts index dbb4720f..6cdc2383 100644 --- a/src/app/core/services/config.service.ts +++ b/src/app/core/services/config.service.ts @@ -30,7 +30,7 @@ export class FuseConfigService colorClasses : { toolbar: 'md-white-500-bg', navbar : 'md-fuse-dark-500-bg', - footer : 'md-fuse-dark-800-bg' + footer : 'md-fuse-dark-700-bg' }, customScrollbars: true, routerAnimation : 'fadeIn' diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.scss b/src/app/main/navbar/horizontal/navbar-horizontal.component.scss index 28cea62d..8b137891 100644 --- a/src/app/main/navbar/horizontal/navbar-horizontal.component.scss +++ b/src/app/main/navbar/horizontal/navbar-horizontal.component.scss @@ -1,137 +1 @@ -@import "../../../core/scss/fuse"; -fuse-main { - - &.fuse-nav-bar-folded { - - .content-wrapper { - - &:last-child { - padding-left: 64px !important; - } - - &:first-child { - padding-right: 64px !important; - } - - &:first-child:last-child { - padding-left: 0 !important; - padding-right: 0 !important; - } - - } - } -} - -fuse-navbar-vertical { - display: flex; - flex-direction: column; - width: 256px; - min-width: 256px; - max-width: 256px; - background-color: #FFFFFF; - overflow-y: auto; - overflow-x: hidden; - z-index: 3; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); - transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear; - transform: translateX(0); - - &.folded { - position: absolute; - top: 0; - bottom: 0; - - &.left-navbar { - left: 0; - } - &.right-navbar { - right: 0; - } - - &:not(.folded-open) { - width: 64px; - min-width: 64px; - max-width: 64px; - - .navbar-header { - padding: 0 16px 0 16px; - } - } - - &.folded-open { - - } - } - - &.close { - &.left-navbar { - transform: translateX(-100%) !important; - } - &.right-navbar { - transform: translateX(100%) !important; - } - box-shadow: none; - } - - @include media-breakpoint('lt-lg') { - position: absolute; - top: 0; - bottom: 0; - &.left-navbar { - left: 0; - } - &.right-navbar { - right: 0; - } - - &:not(.initialized) { - &.left-navbar { - transform: translateX(-100%); - } - &.right-navbar { - transform: translateX(100%); - } - } - } - - .navbar-header { - padding: 0 16px 0 24px; - display: flex; - align-items: center; - height: 64px; - min-height: 64px; - justify-content: space-between; - transition: padding 200ms ease; - background-color: rgba(255, 255, 255, .05); - @include mat-elevation(1); - - .logo { - display: flex; - align-items: center; - - .logo-icon { - display: block; - background: #039BE5; - width: 32px; - min-width: 32px; - height: 32px; - line-height: 32px; - text-align: center; - font-size: 16px; - font-weight: 500; - color: #FFF; - border-radius: 2px; - } - - .logo-text { - margin-left: 16px; - font-size: 16px; - } - } - } - - .nav-bar-content { - flex: 1; - } -}