small tweaks and clean-ups

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)
     {
-        /**
+        // Listen for route changes
-         * When navigation changed
-         */
         router.events.subscribe(
             (event) => {
                 if ( event instanceof NavigationEnd )
                 {
-                    /**
+                    // Check if the url can be found in
-                     * Check if the url is child of the collapse
+                    // 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
             }
         );
 
-        /**
+        // Listen for collapsing of any navigation item
-         * Whenever a navigation collapse item toggled
+        this.navigationService.onNavCollapseToggled
-         */
+            .subscribe(
-        this.navigationService.onNavCollapseToggled.subscribe(
+                (clickedItem) => {
-            (clickedItem) => {
+                    if ( clickedItem.children )
-                if ( clickedItem.children )
-                {
-                    /**
-                     * if clicked collapse is child of this collapse
-                     * return
-                     */
-                    if ( this.item.children.indexOf(clickedItem) !== -1 )
                     {
-                        return;
+                        // Check if the clicked item is one
-                    }
+                        // of the children of this item
-                    /**
+                        if ( this.isChildrenOf(this.item, clickedItem) )
-                     * If collapsed item is not related with this collapse
+                        {
-                     * collapse
+                            return;
-                     */
+                        }
-                    if ( this.item !== clickedItem )
+
-                    {
+                        // If the clicked item is not this item, collapse...
-                        this.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
+     * Check if the given parent has the
-     * @param arr
+     * given item in one of its children
-     * @param url
+     *
-     * @returns {any}
+     * @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 )
+            return true;
-            {
+        }
-                if ( this.isUrlInChildren(arr.children[i], url) )
-                {
-                    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()

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);
     }

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'

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;
-    }
-}