CP adding sidebar component

src/app/_layouts/sidebar/sidebar.component.spec.ts

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

src/app/_layouts/sidebar/sidebar.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { LayoutService } from '../../_api/services';
+import { PanelSection } from '../../_api/models';
+import { Router } 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']
+})
+export class SidebarComponent implements OnInit {
+  public navigation: Array<PanelSection>;
+
+  public hasChildren(item) {
+    return item.children != null && item.children.length > 0 ? true : false;
+  }
+
+  constructor(private _layoutService: LayoutService) { }
+
+  ngOnInit() {
+    this.LoadMenu();
+  }
+
+  private LoadMenu(): void {
+    this._layoutService.Get().subscribe(items => {
+      this.navigation = items;
+    });
+  }
+
+}
+
+@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;
+  }
+}
+
+@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>
+                        {{item.label}}
+                        <span *ngIf="hasBadge()" [ngClass]="'badge badge-' + item.badgeType">{{ item.badge }}</span>
+                    </a>
+               </li>`
+})
+export class SidebarNavItemComponent {
+  @Input() item;
+
+  public hasBadge() {
+    return this.item.badge ? true : false;
+  }
+}
+
+@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>
+          {{item.label}}
+        </a>
+        <ul class="nav-dropdown-items">
+            <li *ngFor="let subitem of item.children">
+                <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>
+      </li>`
+})
+export class SidebarNavDropItemComponent {
+  @Input() item;
+  isOpen = false;
+
+  constructor(
+    protected _router: Router
+  ) {
+  }
+
+  public isActive() {
+    return this.isOpen;
+  }
+
+  public toggleOpen(route: string) {
+    this.isOpen = this.isOpen ? false : true;
+    if (route != null && route !== '') {
+      this._router.navigate([route]);
+    }
+  }
+
+  public hasChildren(item) {
+    return item.children != null && item.children.length > 0 ? true : false;
+  }
+}

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

@@ -0,0 +1,14 @@
+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.module.ts

@@ -42,6 +42,8 @@ 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';
 
 
 
@@ -100,6 +102,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     ToastModule,
     DropdownModule,
     PanelMenuModule,
+    SidebarModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,

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

@@ -1,9 +1,10 @@
 <!-- THIS NEED TO BE UPDATED PROPERLY -->
 <div style="height: 51px" class="blankSpace">
 </div>
-<div class="sidebar">
+<app-sidebar></app-sidebar>
+<!--<div class="sidebar">
     <p-panelMenu [model]="items" [style]="{'color': '#3366ff', 'width':'300px'}"></p-panelMenu>
-</div>
+</div>-->
 <div class="content">
     <div class="info">
         <h4>My Dashboard</h4>