Merge branch 'pullRequest'

* pullRequest:
  Changes the sidebar routes to be more dynamic, including the icon in the routes config

Author: chelarucip

app/sidebar/sidebar-routes.config.ts

@@ -1,11 +1,11 @@
 import { MenuType, RouteInfo } from './sidebar.metadata';
 
 export const ROUTES: RouteInfo[] = [
-    { path: 'dashboard', title: 'Dashboard', menuType: MenuType.LEFT, icon: 'material-icons' },
-    { path: 'user', title: 'User profile', menuType: MenuType.LEFT, icon:'material-icons' },
-    { path: 'table', title: 'Table List', menuType: MenuType.LEFT, icon:'material-icons' },
-    { path: 'typography', title: 'Typography', menuType: MenuType.LEFT, icon:'material-icons' },
-    { path: 'icons', title: 'Icons', menuType: MenuType.LEFT, icon:'material-icons' },
-    { path: 'maps', title: 'Maps', menuType: MenuType.LEFT, icon:'material-icons' },
-    { path: 'notifications', title: 'Notifications', menuType: MenuType.LEFT, icon:'material-icons text-gray' },
+    { path: 'dashboard', title: 'Dashboard', menuType: MenuType.LEFT, icon: 'dashboard' },
+    { path: 'user', title: 'User profile', menuType: MenuType.LEFT, icon:'person' },
+    { path: 'table', title: 'Table List', menuType: MenuType.LEFT, icon:'content_paste' },
+    { path: 'typography', title: 'Typography', menuType: MenuType.LEFT, icon:'library_books' },
+    { path: 'icons', title: 'Icons', menuType: MenuType.LEFT, icon:'bubble_chart' },
+    { path: 'maps', title: 'Maps', menuType: MenuType.LEFT, icon:'location_on' },
+    { path: 'notifications', title: 'Notifications', menuType: MenuType.LEFT, icon:'notifications' },
 ];

app/sidebar/sidebar.component.html

@@ -9,46 +9,10 @@
 <div class="sidebar-wrapper">
     <div class="nav-container">
         <ul class="nav">
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[0].path]">
-                    <i class="{{menuItems[0].icon}}">dashboard</i>
-                    <p>{{menuItems[0].title}}</p>
-                </a>
-            </li>
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[1].path]">
-                    <i class="{{menuItems[1].icon}}">person</i>
-                    <p>{{menuItems[1].title}}</p>
-                </a>
-            </li>
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[2].path]">
-                    <i class="{{menuItems[2].icon}}">content_paste</i>
-                    <p>{{menuItems[2].title}}</p>
-                </a>
-            </li>
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[3].path]">
-                    <i class="{{menuItems[3].icon}}">library_books</i>
-                    <p>{{menuItems[3].title}}</p>
-                </a>
-            </li>
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[4].path]">
-                    <i class="{{menuItems[4].icon}}">bubble_chart</i>
-                    <p>{{menuItems[4].title}}</p>
-                </a>
-            </li>
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[5].path]">
-                    <i class="{{menuItems[5].icon}}">location_on</i>
-                    <p>{{menuItems[5].title}}</p>
-                </a>
-            </li>
-            <li routerLinkActive="active">
-                <a  [routerLink]="[menuItems[6].path]">
-                    <i class="{{menuItems[6].icon}}">notifications</i>
-                    <p>{{menuItems[6].title}}</p>
+            <li *ngFor="let menuItem of menuItems" routerLinkActive="active">
+                <a  [routerLink]="[menuItem.path]">
+                    <i class="material-icons">{{menuItem.icon}}</i>
+                    <p>{{menuItem.title}}</p>
                 </a>
             </li>
         </ul>