feat(sidebar): custom links and 3rd level

src/app/app.menu.ts

@@ -1,175 +0,0 @@
-export const menuItems = [
-  {
-    title: 'Dashboard',
-    path: '/pages/dashboard',
-    icon: 'ion-android-home',
-    selected: false,
-    expanded: false,
-    order: 0
-  },
-  {
-    title: 'Editors',
-    path: '/pages/editors',
-    icon: 'ion-edit',
-    selected: false,
-    expanded: false,
-    order: 100,
-    subMenu: [
-      {
-        title: 'CKEditor',
-        path: '/ckeditor',
-      }
-    ]
-  },
-  {
-    title: 'Charts',
-    path: '/pages/charts',
-    icon: 'ion-stats-bars',
-    selected: false,
-    expanded: false,
-    order: 200,
-    subMenu: [
-      {
-        title: 'Chartist.Js',
-        path: '/chartist-js',
-      },
-    ]
-  },
-  {
-    title: 'UI Features',
-    path: '/pages/ui',
-    icon: 'ion-android-laptop',
-    selected: false,
-    expanded: false,
-    order: 300,
-    subMenu: [
-      {
-        title: 'Typography',
-        path: '/typography',
-      },
-      {
-        title: 'Buttons',
-        path: '/buttons',
-      },
-      {
-        title: 'Icons',
-        path: '/icons',
-      },
-      {
-        title: 'Grid',
-        path: '/grid',
-      },
-    ]
-  },
-  {
-    title: 'Form Elements',
-    path: '/pages/forms',
-    icon: 'ion-compose',
-    selected: false,
-    expanded: false,
-    order: 400,
-    subMenu: [
-      {
-        title: 'Form Inputs',
-        path: '/inputs',
-      },
-      {
-        title: 'Form Layouts',
-        path: '/layouts',
-      },
-    ]
-  },
-  {
-    title: 'Tables',
-    path: '/pages/tables',
-    icon: 'ion-grid',
-    selected: false,
-    expanded: false,
-    order: 500,
-    subMenu: [
-      {
-        title: 'Basic Tables',
-        path: '/basictables',
-      }
-    ]
-  },
-  {
-    title: 'Maps',
-    path: '/pages/maps',
-    icon: 'ion-ios-location-outline',
-    selected: false,
-    expanded: false,
-    order: 600,
-    subMenu: [
-      {
-        title: 'Google Maps',
-        path: '/googlemaps',
-      },
-      {
-        title: 'Leaflet Maps',
-        path: '/leafletmaps',
-      },
-      {
-        title: 'Bubble Maps',
-        path: '/bubblemaps',
-      },
-      {
-        title: 'Line Maps',
-        path: '/linemaps',
-      }
-    ]
-  },
-  {
-    title: 'Pages',
-    icon: 'ion-document',
-    selected: false,
-    expanded: false,
-    order: 650,
-    subMenu: [
-      {
-        title: 'Login',
-        path: '/login',
-      },
-      {
-        title: 'Register',
-        path: '/register',
-      }
-    ]
-  },
-  {
-    title: 'Menu Level 1',
-    icon: 'ion-ios-more',
-    selected: false,
-    expanded: false,
-    order: 700,
-    subMenu: [
-      {
-        title: 'Menu Level 1.1',
-        url: '#',
-        disabled: true,
-        selected: false,
-        expanded: false
-      },
-      {
-        title: 'Menu Level 1.2',
-        url: '#',
-        subMenu: [{
-          title: 'Menu Level 1.2.1',
-          url: '#',
-          disabled: true,
-          selected: false,
-          expanded: false
-        }]
-      }
-    ]
-  },
-  {
-    title: 'External Link',
-    url: 'http://akveo.com',
-    icon: 'ion-android-exit',
-    selected: false,
-    expanded: false,
-    order: 800,
-    target: '_blank'
-  }
-];

src/app/app.routes.ts

@@ -1,9 +1,9 @@
-import { provideRouter, RouterConfig } from '@angular/router';
+import {provideRouter, RouterConfig} from '@angular/router';
 import {LoginRoutes} from "./pages/login/login.routes";
 import {PagesRoutes} from "./pages/pages.routes";
 import {RegisterRoutes} from "./pages/register/register.routes";
 
-export const routes: RouterConfig = [
+export const routes:RouterConfig = [
   ...LoginRoutes,
   ...RegisterRoutes,
   ...PagesRoutes,

src/app/pages/pages.routes.ts

@@ -247,6 +247,61 @@ export const PagesRoutes:RouterConfig = [
           }
         ]
       },
+      {
+        path: '',
+        data: {
+          menu: {
+            title: 'Menu Level 1',
+            icon: 'ion-ios-more',
+            selected: false,
+            expanded: false,
+            order: 700,
+          }
+        },
+        children: [
+          {
+            path: '',
+            data: {
+              menu: {
+                title: 'Menu Level 1.1',
+                url: '#'
+              }
+            }
+          },
+          {
+            path: '',
+            data: {
+              menu: {
+                title: 'Menu Level 1.2',
+                url: '#'
+              }
+            },
+            children: [
+              {
+                path: '',
+                data: {
+                  menu: {
+                    title: 'Menu Level 1.2.1',
+                    url: '#'
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: '',
+        data: {
+          menu: {
+            title: 'External Link',
+            url: 'http://akveo.com',
+            icon: 'ion-android-exit',
+            order: 800,
+            target: '_blank'
+          }
+        }
+      }
     ]
   }
 ];

src/app/theme/components/baMenu/baMenu.service.ts

@@ -65,7 +65,7 @@ export class BaMenuService {
       item.skip = true;
     }
 
-    // we have to collect all pathes to correctly build the url then
+    // we have to collect all paths to correctly build the url then
     item.route.paths = parent && parent.route && parent.route.paths ? parent.route.paths.slice(0) : [];
     item.route.paths.push(item.route.path);
 
@@ -84,10 +84,12 @@ export class BaMenuService {
   }
 
   protected _prepareItem(object:any):any {
-    if (!object.disabled && !object.skip) {
+    if (!object.skip) {
 
       let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths));
       object.url = object.url ? object.url : '/#' + itemUrl;
+
+      object.target = object.target || '';
       return this._selectItem(object);
     }
 

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html

@@ -1,20 +1,20 @@
 <li [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
 
 
-  <a *ngIf="!menuItem.children" (mouseenter)="onHoverItem($event, item)" [href]="menuItem.url" [target]="menuItem.target || ''" class="al-sidebar-list-link">
+  <a *ngIf="!menuItem.children" (mouseenter)="onHoverItem($event, item)" [href]="menuItem.url" [target]="menuItem.target" class="al-sidebar-list-link">
     <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
   </a>
 
   <a *ngIf="menuItem.children" (mouseenter)="onHoverItem($event, item)" (click)="onToggleSubMenu($event, menuItem)" class="al-sidebar-list-link">
     <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
-    <b class="fa" [ngClass]="{'fa-angle-up': menuItem.expanded, 'fa-angle-down': !menuItem.expanded}"></b>
+    <b class="fa fa-angle-down" [ngClass]="{'fa-angle-up': menuItem.expanded}"></b>
   </a>
 
   <ul *ngIf="menuItem.children" class="al-sidebar-sublist" [ngClass]="{'slide-right': menuItem.slideRight}">
     <ba-menu-item [menuItem]="subItem"
                   [child]="true"
                   (itemHover)="onHoverItem($event)"
-                  (toggleSubMenu)="onHoverItem($event, subItem)"
+                  (toggleSubMenu)="onToggleSubMenu($event, subItem)"
                   *ngFor="let subItem of menuItem.children"></ba-menu-item>
   </ul>