nav-items

src/app/core/models/nav-items.model.ts

@@ -2,4 +2,5 @@ export interface NAV_ITEMS {
   name: string;
   img: string;
   index: number;
+  link: string;
 }

src/app/modules/components/side-nav/side-nav.component.html

@@ -1,18 +1,27 @@
 <nav fxLayout="column" fxLayoutAlign="start center">
   <img src="../../../../assets/images/logo.svg" alt="" title="" />
-  <ul fxLayout="column" fxLayoutAlign="start center" class="gap-10">
+  <ul fxLayout="column" fxLayoutAlign="start start" class="gap-10">
     <li *ngFor="let item of navItems">
-      <img class="nav-img" [src]="item.img" alt="" [title]="item.name" />
+      <a
+        [routerLink]="item.link"
+        routerLinkActive="active"
+        fxLayout="row"
+        fxLayoutAlign="start center"
+        class="gap-10"
+      >
+        <img class="nav-img" [src]="item.img" alt="" [title]="item.name" />
+        <span>{{ item.name }}</span>
+      </a>
     </li>
   </ul>
   <div class="absolute bottom">
     <ul>
-      <li class="mb-1">
+      <li class="mb-1 border-0">
         <a routerLink="['']">
           <img src="../../../../assets/images/setting.svg" />
         </a>
       </li>
-      <li>
+      <li class="border-0">
         <a routerLink="['']"
           ><img src="../../../../assets/images/logout.svg"
         /></a>

src/app/modules/components/side-nav/side-nav.component.scss

@@ -10,8 +10,18 @@
       ul {
         list-style: none;
         color: $white-color;
-        padding: 40px 40px;
+        padding: 40px 20px;
         li {
+          border-bottom: 1px solid $white-color;
+          width: 100%;
+          padding-bottom: 10px;
+          cursor: pointer;
+          &:hover {
+            color: $light-blue;
+          }
+          &:last-child {
+            border-bottom: 0;
+          }
           a {
             color: $white-color;
             text-decoration: none;
@@ -20,12 +30,19 @@
               color: $light-blue;
             }
           }
+          span {
+            font-size: 15px;
+          }
         }
       }
 
+      .active {
+        color: $light-blue;
+      }
+
       .nav-img {
-        width: 30px;
-        height: 30px;
+        width: 20px;
+        height: 20px;
         object-fit: cover;
         cursor: pointer;
       }

src/app/modules/components/side-nav/side-nav.component.ts

@@ -12,56 +12,67 @@ export class SideNavComponent {
       index: 1,
       name: 'Dashboard',
       img: '../../../../assets/images/dashboard.svg',
+      link: '/modules/dashboard',
     },
     {
       index: 2,
       name: 'Employees',
-      img: '../../../../assets/dashboard.svg',
+      img: '../../../../assets/images/teams.svg',
+      link: '/employee',
     },
     {
       index: 3,
       name: 'Teams',
       img: '../../../../assets/images/teams.svg',
+      link: '/teams',
     },
     {
       index: 4,
       name: 'Contracts',
       img: '../../../../assets/images/dashboard.svg',
+      link: '/contracts',
     },
     {
       index: 5,
       name: 'Analytics',
       img: '../../../../assets/images/analytics.svg',
+      link: '/analytics',
     },
     {
       index: 6,
       name: 'Task Management',
       img: '../../../../assets/images/task-manager.svg',
+      link: '/task-management',
     },
     {
       index: 7,
       name: 'Tracker',
       img: '../../../../assets/images/tracker.svg',
+      link: '/tracker',
     },
     {
       index: 8,
       name: 'Search for employees',
       img: '../../../../assets/images/search-for-staff-svgrepo-com.svg',
+      link: 'search',
     },
     {
       index: 9,
       name: 'Human recourse',
       img: '../../../../assets/images/human-resource.svg',
+      link: 'human-resource',
     },
     {
       index: 10,
       name: 'Attendance',
       img: '../../../../assets/images/attendance.svg',
+      link: 'attendance',
     },
     {
       index: 11,
       name: 'Orders',
       img: '../../../../assets/images/order.svg',
+      link: 'orders',
     },
   ];
 }

src/app/modules/dashboard/dashboard-theme.scss

@@ -12,7 +12,7 @@
         background: $card-color;
         box-shadow: -2px 6px 9px #2f2c8333;
         border-radius: 20px;
-        height: 333px;
+        height: 307px;
         @media (max-width: 767px) {
           height: inherit;
         }

src/styles.scss

@@ -200,3 +200,6 @@ input.mat-input-element {
 .gap-0 {
   gap: 0;
 }
+.border-0 {
+  border: 0 !important;
+}