Merge pull request #57 from ioet/49-fix-sidebar-menu-item

#49 fix menu items in sidebar

Author: enriquezrene

src/app/modules/shared/components/sidebar/models/item-sidebar.model.ts

@@ -0,0 +1,5 @@
+export interface ItemSidebar {
+  route: string;
+  icon: string;
+  text: string;
+}

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -1,17 +1,9 @@
 <div class="d-flex" id="wrapper">
   <!-- Sidebar -->
-  <div class="bg-light border-right" id="sidebar-wrapper">
+  <div class="bg-light border-right" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
     <div class="list-group list-group-flush">
-      <a [routerLink]="['/time-clock']" routerLinkActive="dark"
-        class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i> Time Clock</a>
-      <a [routerLink]="['/time-entries']" routerLinkActive="dark"
-        class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i> Time Entries</a>
-      <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i
-          class="fas fa-chart-pie"></i> Reports</a>
-      <a [routerLink]="['/project-management']" routerLinkActive="dark"
-        class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i> Projects</a>
-      <a [routerLink]="['/activities-management']" routerLinkActive="dark"
-        class="list-group-item list-group-item-action bg-light"><i class="far fa-file-alt"></i> Activities</a>
+      <a *ngFor="let item of itemsSidebar" [routerLink]="item.route"  routerLinkActive="dark"
+          class="list-group-item list-group-item-action bg-light"><i class="{{item.icon}}"></i> {{item.text}}</a>
     </div>
   </div>
   <!-- /#sidebar-wrapper -->

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -1,15 +1,27 @@
 import { Component, OnInit } from '@angular/core';
-
+import { ItemSidebar } from './models/item-sidebar.model';
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent implements OnInit {
 
+  itemsSidebar: ItemSidebar[] = [];
+
   constructor() { }
 
   ngOnInit(): void {
+    this.getItemsSidebar();
   }
 
+  getItemsSidebar() {
+    this.itemsSidebar = [
+      {route: './time-clock', icon: 'far fa-clock', text: 'Time Clock' },
+      {route: './time-entries', icon: 'far fa-list-alt', text: 'Time Entries' },
+      {route: './reports', icon: 'fas fa-chart-pie', text: 'Reports' },
+      {route: './project-management', icon: 'far fa-folder-open', text: 'Projects' },
+      {route: './activities-management', icon: 'far fa-file-alt', text: 'Activities' }
+    ];
+  }
 }