Merge pull request ioet#239 from ioet/231_Align_menu_items_from_sidebar

fix: ioet#231 Align menu items from sidebar

Author: enriquezrene

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

@@ -4,14 +4,14 @@
     <div class="text-center my-5">
       <img src="assets/img/ioet-logo-light.png" width="70" height="auto" class="img-fluid" alt="Ioet logo" />
     </div>
-    <div class="d-flex flex-column">
+    <div class="container">
       <a
         *ngFor="let item of itemsSidebar"
         [routerLink]="item.route"
-        routerLinkActive="background-item-sidebar-active"
-        class="item-hover text-white p-3 text-decoration-none"
+        routerLinkActive=""
+        class="item-hover text-white item"
       >
-        <i class="{{ item.icon }} mr-3 ml-3"></i> {{ item.text }}</a
+        <i class="{{ item.icon }}"></i> {{ item.text }}</a
       >
     </div>
   </div>

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

@@ -35,6 +35,18 @@
   }
 }
 
+.container {
+  display: grid;
+  grid-gap: 20px;
+  justify-content: center;
+  align-self: center;
+  .item {
+    display: grid;
+    grid-template-columns: 30px 100px;
+    align-items: center;
+  }
+}
+
 @media (min-width: 768px) {
   #wrapper {
     #sidebar-wrapper {

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

@@ -19,7 +19,7 @@ export class SidebarComponent implements OnInit {
       { route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock' },
       { route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries' },
       { route: '/reports', icon: 'fas fa-chart-pie', text: 'Reports' },
-      { route: '/activities-management', icon: 'fas fa-file-alt', text: ' Activities' },
+      { route: '/activities-management', icon: 'fas fa-file-alt', text: 'Activities' },
       { route: '/customers-management', icon: 'fas fa-user', text: 'Customers' },
     ];
   }