CP adding sidebar + handle service PanelSection

package-lock.json

@@ -1938,9 +1938,9 @@
       }
     },
     "bootstrap": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
-      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
     },
     "brace-expansion": {
       "version": "1.1.11",

package.json

@@ -25,7 +25,7 @@
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "angular-font-awesome": "^3.1.2",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.4.1",
     "core-js": "^2.5.4",
     "flag-icon-css": "^3.3.0",
     "font-awesome": "^4.7.0",

src/app/_api/api.module.ts

@@ -9,7 +9,9 @@ import { DeviceService } from './services/device.service';
 import { FacebookService } from './services/facebook.service';
 import { GoogleService } from './services/google.service';
 import { IOTService } from './services/iot.service';
+import { LayoutService } from './services/layout.service';
 import { MQTTService } from './services/mqtt.service';
+import { OddService } from './services/odd.service';
 import { TokenService } from './services/token.service';
 import { TwitterService } from './services/twitter.service';
 import { UserService } from './services/user.service';
@@ -34,7 +36,9 @@ import { ValuesService } from './services/values.service';
     FacebookService,
     GoogleService,
     IOTService,
+    LayoutService,
     MQTTService,
+    OddService,
     TokenService,
     TwitterService,
     UserService,

src/app/_api/models.ts

@@ -5,6 +5,10 @@ export { FacebookAuthModel } from './models/facebook-auth-model';
 export { GoogleAuthModel } from './models/google-auth-model';
 export { SmartPrinterMessage } from './models/smart-printer-message';
 export { SmartGardenMessage } from './models/smart-garden-message';
+export { PanelSection } from './models/panel-section';
+export { PanelMenuItem } from './models/panel-menu-item';
+export { OddNice } from './models/odd-nice';
+export { OddH2H } from './models/odd-h2h';
 export { TokenDTO } from './models/token-dto';
 export { UserInfo } from './models/user-info';
 export { ScreenConfiguration } from './models/screen-configuration';

src/app/_api/models/odd-h2h.ts

@@ -0,0 +1,6 @@
+/* tslint:disable */
+export interface OddH2H {
+  homeOdd?: number;
+  drawOdd?: number;
+  visitOdd?: number;
+}

src/app/_api/models/odd-nice.ts

@@ -0,0 +1,8 @@
+/* tslint:disable */
+import { OddH2H } from './odd-h2h';
+export interface OddNice {
+  teams?: Array<string>;
+  commence_time?: number;
+  home_team?: string;
+  odds?: OddH2H;
+}

src/app/_api/models/panel-menu-item.ts

@@ -0,0 +1,9 @@
+/* tslint:disable */
+export interface PanelMenuItem {
+  label?: string;
+  route?: string;
+  icon?: string;
+  badgeValue?: number;
+  badgeType?: string;
+  children?: Array<PanelMenuItem>;
+}

src/app/_api/models/panel-section.ts

@@ -0,0 +1,9 @@
+/* tslint:disable */
+import { PanelMenuItem } from './panel-menu-item';
+export interface PanelSection {
+  label?: string;
+  icon?: string;
+  color?: string;
+  defaultRoute?: string;
+  children?: Array<PanelMenuItem>;
+}

src/app/_api/services.ts

@@ -4,7 +4,9 @@ export { DeviceService } from './services/device.service';
 export { FacebookService } from './services/facebook.service';
 export { GoogleService } from './services/google.service';
 export { IOTService } from './services/iot.service';
+export { LayoutService } from './services/layout.service';
 export { MQTTService } from './services/mqtt.service';
+export { OddService } from './services/odd.service';
 export { TokenService } from './services/token.service';
 export { TwitterService } from './services/twitter.service';
 export { UserService } from './services/user.service';

src/app/_api/services/layout.service.ts

@@ -0,0 +1,61 @@
+/* tslint:disable */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpRequest, HttpResponse, HttpHeaders } from '@angular/common/http';
+import { BaseService as __BaseService } from '../base-service';
+import { ApiConfiguration as __Configuration } from '../api-configuration';
+import { StrictHttpResponse as __StrictHttpResponse } from '../strict-http-response';
+import { Observable as __Observable } from 'rxjs';
+import { map as __map, filter as __filter } from 'rxjs/operators';
+
+import { PanelSection } from '../models/panel-section';
+@Injectable({
+  providedIn: 'root',
+})
+class LayoutService extends __BaseService {
+  static readonly GetPath = '/api/layout/panelSection';
+
+  constructor(
+    config: __Configuration,
+    http: HttpClient
+  ) {
+    super(config, http);
+  }
+
+  /**
+   * @return Success
+   */
+  GetResponse(): __Observable<__StrictHttpResponse<Array<PanelSection>>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+    let req = new HttpRequest<any>(
+      'GET',
+      this.rootUrl + `/api/layout/panelSection`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<Array<PanelSection>>;
+      })
+    );
+  }
+  /**
+   * @return Success
+   */
+  Get(): __Observable<Array<PanelSection>> {
+    return this.GetResponse().pipe(
+      __map(_r => _r.body as Array<PanelSection>)
+    );
+  }
+}
+
+module LayoutService {
+}
+
+export { LayoutService }

src/app/_api/services/odd.service.ts

@@ -0,0 +1,128 @@
+/* tslint:disable */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpRequest, HttpResponse, HttpHeaders } from '@angular/common/http';
+import { BaseService as __BaseService } from '../base-service';
+import { ApiConfiguration as __Configuration } from '../api-configuration';
+import { StrictHttpResponse as __StrictHttpResponse } from '../strict-http-response';
+import { Observable as __Observable } from 'rxjs';
+import { map as __map, filter as __filter } from 'rxjs/operators';
+
+import { OddNice } from '../models/odd-nice';
+@Injectable({
+  providedIn: 'root',
+})
+class OddService extends __BaseService {
+  static readonly GetForCountryPath = '/api/odd/country/{id}/{oddRequest}';
+  static readonly GetAllPath = '/api/odd/{oddRequest}';
+
+  constructor(
+    config: __Configuration,
+    http: HttpClient
+  ) {
+    super(config, http);
+  }
+
+  /**
+   * @param params The `OddService.GetForCountryParams` containing the following parameters:
+   *
+   * - `oddRequest`: Odd Maximum value
+   *
+   * - `id`: id of country, e.g = BE for Belgium
+   *
+   * @return Success
+   */
+  GetForCountryResponse(params: OddService.GetForCountryParams): __Observable<__StrictHttpResponse<Array<OddNice>>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+
+
+    let req = new HttpRequest<any>(
+      'GET',
+      this.rootUrl + `/api/odd/country/${params.id}/${params.oddRequest}`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<Array<OddNice>>;
+      })
+    );
+  }
+  /**
+   * @param params The `OddService.GetForCountryParams` containing the following parameters:
+   *
+   * - `oddRequest`: Odd Maximum value
+   *
+   * - `id`: id of country, e.g = BE for Belgium
+   *
+   * @return Success
+   */
+  GetForCountry(params: OddService.GetForCountryParams): __Observable<Array<OddNice>> {
+    return this.GetForCountryResponse(params).pipe(
+      __map(_r => _r.body as Array<OddNice>)
+    );
+  }
+
+  /**
+   * @param oddRequest Odd Maximum value
+   * @return Success
+   */
+  GetAllResponse(oddRequest: number): __Observable<__StrictHttpResponse<Array<OddNice>>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+
+    let req = new HttpRequest<any>(
+      'GET',
+      this.rootUrl + `/api/odd/${oddRequest}`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<Array<OddNice>>;
+      })
+    );
+  }
+  /**
+   * @param oddRequest Odd Maximum value
+   * @return Success
+   */
+  GetAll(oddRequest: number): __Observable<Array<OddNice>> {
+    return this.GetAllResponse(oddRequest).pipe(
+      __map(_r => _r.body as Array<OddNice>)
+    );
+  }
+}
+
+module OddService {
+
+  /**
+   * Parameters for GetForCountry
+   */
+  export interface GetForCountryParams {
+
+    /**
+     * Odd Maximum value
+     */
+    oddRequest: number;
+
+    /**
+     * id of country, e.g = BE for Belgium
+     */
+    id: string;
+  }
+}
+
+export { OddService }

src/app/_layouts/sidebar/sidebar.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { SidebarComponent, SidebarNavRootItemComponent, SidebarNavDropItemComponent, SidebarNavItemComponent } from './sidebar.component';
-
-@NgModule({
-    imports: [CommonModule, RouterModule],
-  declarations: [SidebarComponent, SidebarNavItemComponent, SidebarNavRootItemComponent, SidebarNavDropItemComponent],
-    exports: [SidebarComponent],
-    providers: [  ]
-})
-export class SidebarModule {
-
-}

src/app/app-routing.module.ts

@@ -22,7 +22,9 @@ const routes: Routes =
         { path: '', component: ProfileComponent},
         { path: ':profileId', children: [
             { path: '', component: ProfileComponent},
-            { path: 'dashboard', component: DashboardComponent},
+            { path: 'dashboard', component: DashboardComponent, children: [
+              { path: '**', component: DashboardComponent}
+              ]},
             { path: 'edit', component: EditProfileComponent},
             { path: 'automation', children: [
               { path: '', component: AutomationComponent},

src/app/app.component.css

@@ -14,8 +14,8 @@ p-toolbar img{
 p-toolbar {
     background-color: lightgrey;
     opacity: 0.7;
-    z-index: 999;
-    position: absolute;
+    /*z-index: 999;
+    position: fixed;*/
     width: 100%;
     border:none;
 }

src/app/app.module.ts

@@ -42,8 +42,7 @@ import { DashboardComponent } from './control-panel/profile/dashboard/dashboard.
 import { BetComponent } from './control-panel/bet/bet.component';
 import { PanelMenuModule } from 'primeng/panelmenu';
 import { EnergyComponent } from './control-panel/profile/dashboard/energy/energy.component';
-import { SidebarComponent } from './_layouts/sidebar/sidebar.component';
-import { SidebarModule } from './_layouts/sidebar/sidebar.module';
+import { SidebarDashboardComponent, SidebarNavItemComponent, SidebarNavDropItemComponent } from './control-panel/profile/dashboard/sidebar/sidebarDashboard.component';
 
 
 
@@ -80,7 +79,10 @@ export function HttpLoaderFactory(http: HttpClient) {
     DevicesComponent,
     DashboardComponent,
     BetComponent,
-    EnergyComponent
+    EnergyComponent,
+    SidebarDashboardComponent,
+    SidebarNavItemComponent,
+    SidebarNavDropItemComponent
   ],
   imports: [
     BrowserModule,
@@ -102,7 +104,6 @@ export function HttpLoaderFactory(http: HttpClient) {
     ToastModule,
     DropdownModule,
     PanelMenuModule,
-    SidebarModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,

src/app/control-panel/profile/automation/automation.component.html

@@ -4,7 +4,6 @@
   <br>
   <br>
 </div>
-
 <h4>My Automations</h4>
 
 <p>

src/app/control-panel/profile/dashboard/dashboard.component.css

@@ -1,4 +1,4 @@
-.sidebar {
+/* .sidebar {
     position: fixed;
     width: 180px;
 }
@@ -14,4 +14,20 @@
 .info {
     position: relative;
     background: #f55;
+} */
+
+.wrapper {
+    display: flex;
+    align-items: stretch;
+}
+
+/* ---------------------------------------------------
+    CONTENT STYLE
+----------------------------------------------------- */
+
+#content {
+    width: 100%;
+    padding: 20px;
+    min-height: 100vh;
+    transition: all 0.3s;
 }

src/app/control-panel/profile/dashboard/dashboard.component.html

@@ -1,15 +1,7 @@
-<!-- THIS NEED TO BE UPDATED PROPERLY -->
-<div style="height: 51px" class="blankSpace">
-</div>
-<app-sidebar></app-sidebar>
-<!--<div class="sidebar">
-    <p-panelMenu [model]="items" [style]="{'color': '#3366ff', 'width':'300px'}"></p-panelMenu>
-</div>-->
-<div class="content">
-    <div class="info">
-        <h4>My Dashboard</h4>
-        <div *ngIf="ShowEnergy">
-            <app-energy></app-energy>
-        </div>
+<div class="wrapper">
+    <app-sidebar-dashboard style="background-color: #007ad9;"></app-sidebar-dashboard>
+
+    <div id="content">
+        <app-energy *ngIf="ActiveTab == 'energy'"></app-energy>
     </div>
 </div>

src/app/control-panel/profile/dashboard/dashboard.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {PanelMenuModule} from 'primeng/panelmenu';
-import {MenuItem} from 'primeng/api';
-import { ElementSchemaRegistry } from '@angular/compiler';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -10,71 +8,26 @@ import { ElementSchemaRegistry } from '@angular/compiler';
 })
 export class DashboardComponent implements OnInit {
 
-  items: MenuItem[];
+  UrlRegex = /dashboard.*/;
 
-  ShowEnergy = false;
+  ActiveTab = '';
 
-  constructor() { }
+  constructor(private _router: Router,
+    private _route: ActivatedRoute) { }
 
   ngOnInit() {
-    // TODO Retrieve list from service (depends on what the user has access to)
-    this.items = [
-      {
-          icon: 'fas fa-seedling',
-          label: 'Energy',
-          items: [
-                {label: 'Electricity', icon: 'fas fa-bolt',
-                items: [
-                  {label: 'Solar Panel', icon: 'fas fa-solar-panel',
-                  command: () => { this.Open('Energy/Electricity/SolarPanel'); }}
-                ],
-                command: () => { this.Open('Energy/Electricity'); }},
-                {label: 'Gas', icon: 'fas fa-burn'},
-                {label: 'Water', icon: 'fas fa-tint'}
-          ], command: () => { this.Open('Energy'); }
-      },
-      {
-          label: 'Security',
-          icon: 'fas fa-lock',
-          items: [
-            {label: 'Alarm', icon: 'fas fa-bell'},
-            {label: 'Camera', icon: 'fas fa-video'}
-      ]
-      },
-      {
-          label: 'Entertainment',
-          icon: 'fas fa-music',
-          items: [
-              {
-                  label: 'Music',
-                  icon: 'fas fa-music'
-              },
-              {
-                  label: 'Tv',
-                  icon: 'fas fa-tv',
+    this._router.events.subscribe(e => {
+      if (e instanceof NavigationEnd) {
+        console.log('current route: ', this._router.url.toString());
+        console.log(this._router.url.match(this.UrlRegex)[0]);
+        this.ActiveTab = this._router.url.match(this.UrlRegex)[0];
+        switch (this._router.url.match(this.UrlRegex)[0]) {
+          case 'dashboard/energy':
+            this.ActiveTab = 'energy';
+          break;
         }
-          ]
-      },
-      {
-          label: 'Health',
-          icon: 'fas fa-heartbeat',
-          items: [
-              {
-                  label: 'My body',
-                  icon: '	fas fa-user-alt'
-              },
-              {
-                  label: 'Fitness',
-                  icon: 'fas fa-running',
       }
-          ]
-      }
-  ];
-  }
-
-  Open(module: string) {
-    console.log(module);
-    this.ShowEnergy = true;
+    });
   }
 
 }

src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.html

@@ -0,0 +1,84 @@
+<!-- Sidebar  -->
+<nav id="sidebar" [ngClass]="{'active': CollapseBar}">
+    <div>
+        <button type="button" class="btn btnCollapse" (click)="CollapseSideBar()">
+            <i *ngIf="!CollapseBar" class="fas fa-angle-left"></i>
+            <i *ngIf="CollapseBar" class="fas fa-angle-right"></i>
+        </button>
+        <!--<h3>My Home</h3>
+        <strong>MH</strong>-->
+    </div>
+
+    <ul class="list-unstyled components">
+        <li *ngFor="let item of navigation">
+            <div *ngIf="!hasChildren(item)">
+                <a [routerLink]="[item.defaultRoute]">
+                    <i class="{{item.icon}}" [style.color]="item.color ? item.color : 'white'" aria-hidden="true"></i>
+                    {{item.label}}
+                    <span *ngIf="hasBadge(item)" [ngClass]="'badge badge-' + item.badgeType">{{ item.badge }}</span>
+                </a>
+            </div>
+            <div *ngIf="hasChildren(item)">
+                <a class="dropdown-toggle" data-toggle="collapse" aria-expanded="false" (click)="ToggleOpen(item.defaultRoute, item)">
+                    <i *ngIf="item.icon != null" [ngClass]="item.icon" [style.color]="item.color ? item.color : 'white'"></i>
+                    {{item.label}}
+                </a>
+                <ul class="list-unstyled components" [ngClass]="{'collapse': !item.isOpen}">
+                    <li *ngFor="let subitem of item.children">
+                        <div *ngIf="!hasChildren(subitem)">
+                        <a (click)="GoToRoute(item.defaultRoute, subitem.route)">
+                            <i class="{{subitem.icon}}" [style.color]="subitem.color ? subitem.color : 'white'" aria-hidden="true"></i>
+                            {{subitem.label}}
+                            <span *ngIf="hasBadge(subitem)" [ngClass]="'badge badge-' + item.badgeType">{{ subitem.badge }}</span>
+                        </a>
+                        </div>
+                        <!--<app-sidebar-nav-item *ngIf="!hasChildren(subitem)" [item]="subitem"></app-sidebar-nav-item>
+                        <app-sidebar-nav-dropdown-item *ngIf="hasChildren(subitem)" [item]="subitem"></app-sidebar-nav-dropdown-item>-->
+                    </li>
+                </ul>
+            </div>
+            <!--<app-sidebar-nav-root-item *ngIf="!hasChildren(item)" [item]="item"></app-sidebar-nav-root-item>
+            <app-sidebar-nav-dropdown-item *ngIf="hasChildren(item)" [item]="item"></app-sidebar-nav-dropdown-item>-->
+        </li>
+        <!--<li class="active">
+            <a (click)="CollapseSubBar()" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                <i class="fas fa-home"></i>
+                Home
+            </a>
+            <ul [ngClass]="{'collapse': CollapseSubBarBool}" class="list-unstyled" id="homeSubmenu">
+                <li>
+                    <a>Home 1</a>
+                </li>
+                <li>
+                    <a>Home 2</a>
+                </li>
+                <li>
+                    <a>Home 3</a>
+                </li>
+            </ul>
+        </li>
+        
+        <li>
+            <a>
+                <i class="fas fa-briefcase"></i>
+                About
+            </a>
+            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                <i class="fas fa-copy"></i>
+                Pages
+            </a>
+            <ul class="collapse list-unstyled" id="pageSubmenu">
+                <li>
+                    <a href="#">Page 1</a>
+                </li>
+                <li>
+                    <a href="#">Page 2</a>
+                </li>
+                <li>
+                    <a href="#">Page 3</a>
+                </li>
+            </ul>
+        </li>-->
+    </ul>
+
+</nav>

src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.scss

@@ -0,0 +1,195 @@
+$base-color: #007ad9;
+$second-color: #66AFE8;
+$hover-color: #c1dff5;
+
+a,
+a:hover,
+a:focus {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+/* ---------------------------------------------------
+    SIDEBAR STYLE
+----------------------------------------------------- */
+
+#sidebar {
+    min-width: 250px;
+    max-width: 250px;
+    background: $base-color;
+    color: #fff;
+    transition: all 0.3s;
+}
+
+#sidebar.active {
+    min-width: 80px;
+    max-width: 80px;
+    text-align: center;
+}
+
+#sidebar.active .sidebar-header h3,
+#sidebar.active .CTAs {
+    display: none;
+}
+
+#sidebar.active .sidebar-header strong {
+    display: block;
+}
+
+#sidebar ul li a {
+    text-align: left;
+}
+
+#sidebar.active ul li a {
+    padding: 20px 10px;
+    text-align: center;
+    font-size: 0.85em;
+}
+
+#sidebar.active ul li a i {
+    margin-right: 0;
+    display: block;
+    font-size: 1.8em;
+    margin-bottom: 5px;
+}
+
+#sidebar.active ul ul a {
+    padding: 10px !important;
+}
+
+#sidebar.active .dropdown-toggle::after {
+    top: auto;
+    bottom: 10px;
+    right: 50%;
+    -webkit-transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    transform: translateX(50%);
+}
+
+#sidebar .sidebar-header {
+    padding: 20px;
+    background: $second-color;
+}
+
+#sidebar .sidebar-header strong {
+    display: none;
+    font-size: 1.8em;
+}
+
+#sidebar ul.components {
+    padding: 20px 0;
+    /*border-bottom: 1px solid #47748b;*/
+}
+
+#sidebar ul li a {
+    padding: 10px;
+    font-size: 1.1em;
+    display: block;
+}
+
+#sidebar ul li a:hover {
+    color: $base-color;
+    background: $hover-color;
+}
+
+#sidebar ul li a i {
+    margin-right: 10px;
+}
+
+#sidebar ul li.active>a,
+a[aria-expanded="true"] {
+    color: $hover-color;
+    background: $second-color;
+}
+
+a[data-toggle="collapse"] {
+    position: relative;
+}
+
+.dropdown-toggle::after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+}
+
+ul ul a {
+    font-size: 0.9em !important;
+    padding-left: 30px !important;
+    background: $second-color;
+}
+
+
+/* ---------------------------------------------------
+    CONTENT STYLE
+----------------------------------------------------- */
+
+#content {
+    width: 100%;
+    padding: 20px;
+    min-height: 100vh;
+    transition: all 0.3s;
+}
+
+.btnCollapse {
+    position: absolute;
+    top: 1%;
+    left: 1%;
+    color: $base-color;
+
+}
+
+/* ---------------------------------------------------
+    MEDIAQUERIES
+----------------------------------------------------- */
+
+@media (max-width: 768px) {
+    #sidebar {
+        min-width: 80px;
+        max-width: 80px;
+        text-align: center;
+        margin-left: -80px !important;
+    }
+    .dropdown-toggle::after {
+        top: auto;
+        bottom: 10px;
+        right: 50%;
+        -webkit-transform: translateX(50%);
+        -ms-transform: translateX(50%);
+        transform: translateX(50%);
+    }
+    #sidebar.active {
+        margin-left: 0 !important;
+    }
+    #sidebar .sidebar-header h3,
+    #sidebar .CTAs {
+        display: none;
+    }
+    #sidebar .sidebar-header strong {
+        display: block;
+    }
+    #sidebar ul li a {
+        padding: 20px 10px;
+    }
+    #sidebar ul li a span {
+        font-size: 0.85em;
+    }
+    #sidebar ul li a i {
+        margin-right: 0;
+        display: block;
+    }
+    #sidebar ul ul a {
+        padding: 10px !important;
+    }
+    #sidebar ul li a i {
+        font-size: 1.3em;
+    }
+    #sidebar {
+        margin-left: 0;
+    }
+    #sidebarCollapse span {
+        display: none;
+    }
+}

src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SidebarComponent } from './sidebar.component';
+import { SidebarDashboardComponent } from './sidebarDashboard.component';
 
 describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
+  let component: SidebarDashboardComponent;
+  let fixture: ComponentFixture<SidebarDashboardComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ]
+      declarations: [ SidebarDashboardComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SidebarComponent);
+    fixture = TestBed.createComponent(SidebarDashboardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/control-panel/profile/dashboard/sidebar/sidebarDashboard.component.ts

@@ -1,31 +1,25 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { LayoutService } from '../../_api/services';
-import { PanelSection } from '../../_api/models';
-import { Router } from '@angular/router';
+import { LayoutService } from '../../../../_api/services';
+import { PanelSection } from '../../../../_api/models';
+import { Router, Route, ActivatedRoute } from '@angular/router';
 
 @Component({
-  selector: 'app-sidebar',
-  template: `
-    <div class="sidebar">
-      <nav class="sidebar-nav">
-        <ul class="nav">
-          <li *ngFor="let item of navigation">
-              <app-sidebar-nav-root-item *ngIf="!hasChildren(item)" [item]="item"></app-sidebar-nav-root-item>
-              <app-sidebar-nav-dropdown-item *ngIf="hasChildren(item)" [item]="item"></app-sidebar-nav-dropdown-item>
-          </li>
-        </ul>
-      </nav>
-    </div>`,
-  styleUrls: ['./sidebar.component.scss']
+  selector: 'app-sidebar-dashboard',
+  templateUrl: './sidebarDashboard.component.html',
+  styleUrls: ['./sidebarDashboard.component.scss']
 })
-export class SidebarComponent implements OnInit {
+export class SidebarDashboardComponent implements OnInit {
   public navigation: Array<PanelSection>;
 
-  public hasChildren(item) {
-    return item.children != null && item.children.length > 0 ? true : false;
-  }
+  CollapseBar = false;
+  CollapseSubBarBool = false;
 
-  constructor(private _layoutService: LayoutService) { }
+  UrlRegex = /.*dashboard/;
+
+  constructor(private _layoutService: LayoutService, 
+              private _router: Router,
+              private _route: ActivatedRoute
+  ) { }
 
   ngOnInit() {
     this.LoadMenu();
@@ -37,35 +31,43 @@ export class SidebarComponent implements OnInit {
     });
   }
 
+  public hasChildren(item) {
+    return item.children != null && item.children.length > 0 ? true : false;
   }
 
-@Component({
-  selector: 'app-sidebar-nav-root-item',
-  template: `<li class="nav-root-item">
-                    <a class="nav-link" [routerLink]="[item.defaultRoute]">
-                        <i class="fa {{item.icon}}" [style.color]="item.color ? item.color : '#999'" aria-hidden="true"></i>
-                        {{item.label}}
-                        <span *ngIf="hasBadge()" [ngClass]="'badge badge-' + item.badgeType">{{ item.badge }}</span>
-                    </a>
-               </li>`
-})
-export class SidebarNavRootItemComponent {
-  @Input() item;
-
-  public hasBadge() {
-    return this.item.badge ? true : false;
+  public hasBadge(item) {
+    return item.badge ? true : false;
   }
+
+  CollapseSideBar() {
+    this.CollapseBar = !this.CollapseBar;
+    //$('#sidebar').toggleClass('active');
+  }
+
+  ToggleOpen(route: string, item) {
+    item.isOpen = item.isOpen ? false : true;
+    if (route != null && route !== '') {
+      this._router.navigate([this._router.url.match(this.UrlRegex)[0], route]);
+    }
+  }
+
+  GoToRoute(mainroute: string, route: string) {
+    if (mainroute != null && mainroute !== '' && route != null && route !== '') {
+      this._router.navigate([this._router.url.match(this.UrlRegex)[0], mainroute, route]);
+    }
+  }
+
 }
 
 @Component({
   selector: 'app-sidebar-nav-item',
-  template: `<li class="nav-item">
-                    <a class="nav-link" [routerLink]="[item.route]">
-                        <i *ngIf="item.icon != null" [ngClass]="'fa ' + item.icon" [style.color]="item.color ? item.color : '#999'"></i>
+  template: `<div>
+                    <a [routerLink]="[item.route]">
+                        <i *ngIf="item.icon != null" [ngClass]="'fa ' + item.icon" [style.color]="item.color ? item.color : 'white'"></i>
                         {{item.label}}
                         <span *ngIf="hasBadge()" [ngClass]="'badge badge-' + item.badgeType">{{ item.badge }}</span>
                     </a>
-               </li>`
+               </div>`
 })
 export class SidebarNavItemComponent {
   @Input() item;
@@ -78,8 +80,8 @@ export class SidebarNavItemComponent {
 @Component({
   selector: 'app-sidebar-nav-dropdown-item',
   template: `<li class="nav-item nav-dropdown" [class.open]="isActive()" routerLinkActive="open">
-        <a class="nav-link nav-dropdown-toggle" (click)="toggleOpen(item.defaultRoute)">
-          <i *ngIf="item.icon != null" [ngClass]="'fa ' + item.icon" [style.color]="item.color ? item.color : '#999'"></i>
+        <a class="dropdown-toggle" (click)="toggleOpen(item.defaultRoute)">
+          <i *ngIf="item.icon != null" [ngClass]="'fa ' + item.icon" [style.color]="item.color ? item.color : 'white'"></i>
           {{item.label}}
         </a>
         <ul class="nav-dropdown-items">
@@ -110,7 +112,9 @@ export class SidebarNavDropItemComponent {
     }
   }
 
+
   public hasChildren(item) {
     return item.children != null && item.children.length > 0 ? true : false;
   }
 }
+