Sidebar 2.0

src/app/app.component.css

@@ -6,7 +6,7 @@
   margin-top: 10px;
   bottom: 0;
   opacity: 95%;
-  background: rgba(34, 129, 247, 0.8);
+  /* background: rgba(34, 129, 247, 0.8); */
 }
 
 .nav a {

src/app/app.component.html

@@ -2,35 +2,21 @@
 
   <!-- sidebar div -->
   <div class="sidebar">
-    <div class="logo">
-      <a class="simple-text logo-normal">
-        Taskboard
-      </a>
-    </div>
-    <!-- linklist -->
+  <div class="sidebar-wrapper">
     <ul class="nav">
-      <li routerLinkActive="active">
-        <a routerLink="/dashboard">
-          <p>Dashboard</p>
-        </a>
-      </li>
-      <li routerLinkActive="active">
-        <a routerLink="/sprints">
-          <p>Sprints</p>
-        </a>
-      </li>
-      <li routerLinkActive="active">
-        <a routerLink="/userstories">
-          <p>Userstories</p>
-        </a>
-      </li>
-      <li routerLinkActive="active">
-        <a routerLink="/tasks">
-          <p>Tasks</p>
+      <li
+        routerLinkActive="active"
+        *ngFor="let menuItem of menuItems"
+        class="{{ menuItem.class }} nav-item"
+      >
+        <a [routerLink]="[menuItem.path]">
+          <i class="tim-icons  {{ menuItem.icon }}"></i>
+          <p>{{ menuItem.title }}</p>
         </a>
       </li>
     </ul>
   </div>
+</div>
 
   <router-outlet></router-outlet>
 
@@ -42,7 +28,7 @@
           <i class="fa fa-cog fa-2x"></i>
         </a>
         <ul ngbDropdownMenu>
-          <!--
+          <
           <li class=" header-title">Sidebar Background</li>
           <li class=" adjustments-line">
             <a class=" switch-trigger background-color" href="javascript:void(0)">
@@ -64,7 +50,7 @@
               <div class=" clearfix"></div>
             </a>
           </li>
-          -->
+          
           <li class=" adjustments-line text-center color-change">
             <span class=" color-label"> LIGHT MODE </span>
             <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>

src/app/app.component.ts

@@ -1,12 +1,65 @@
 import { Component } from '@angular/core';
 
+declare interface RouteInfo {
+  path: string;
+  title: string;
+  icon: string;
+  class: string;
+}
+export const ROUTES: RouteInfo[] = [
+  {
+    path: "/dashboard",
+    title: "Dashboard",
+    icon: "icon-chart-pie-36",
+    class: ""
+  },
+  {
+    path: "/backlog",
+    title: "Backlog",
+    icon: "icon-atom",
+    class: ""
+  },
+  {
+    path: "/userstories",
+    title: "Userstories",
+    icon: "icon-pin",
+    class: ""
+  },
+  {
+    path: "/tasks",
+    title: "Tasks",
+    icon: "icon-bell-55",
+    class: ""
+  },
+  {
+    path: "/sprints",
+    title: "Sprints",
+    icon: "icon-single-02",
+    class: ""
+  }
+];
+
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  /*
+  
+  menuItems: any[];
+  public sidebarColor: string = "blue";
+
+  ngOnInit() {
+    this.menuItems = ROUTES.filter(menuItem => menuItem);
+  }
+  isMobileMenu() {
+    if (window.innerWidth > 991) {
+      return false;
+    }
+    return true;
+  }
+
   changeSidebarColor(color){
     var sidebar = document.getElementsByClassName('sidebar')[0];
     var mainPanel = document.getElementsByClassName('main-panel')[0];
@@ -20,7 +73,7 @@ export class AppComponent {
         mainPanel.setAttribute('data',color);
     }
   }
-  */
+  
   changeDashboardColor(color){
     var body = document.getElementsByTagName('body')[0];
     if (body && color === 'white-content') {