side nav

src/app/app-routing.module.ts

@@ -21,6 +21,11 @@ const routes: Routes = [
             (m) => m.AuthenticationModule
           ),
       },
+      {
+        path: 'modules',
+        loadChildren: () =>
+          import('./modules/modules.module').then((m) => m.ModulesModule),
+      },
     ],
   },
 ];

src/app/authentication/auth-sign-in/sign-in/sign-in.component.html

@@ -29,7 +29,7 @@
     <a [routerLink]="['./forget-password']">Forget Password?</a>
   </p>
 
-  <button type="submit">Sign in</button>
+  <button type="submit" [routerLink]="['/modules']">Sign in</button>
   <h5>
     Don't have an account yet ?
     <span [routerLink]="['/auth/signUp']">Sign Up</span>

src/app/modules/components/header/header.component.html

@@ -0,0 +1 @@
+<p>header works!</p>

src/app/modules/components/header/header.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HeaderComponent]
+    });
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/components/header/header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent {
+
+}

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

@@ -0,0 +1,24 @@
+<nav fxLayout="column" fxLayoutAlign="start center">
+  <img src="../../../../assets/images/logo.svg" alt="" title="" />
+  <ul fxLayout="column" fxLayoutAlign="start center" class="gap-10">
+    <li>
+      <a routerLink="['']">Dashboard</a>
+    </li>
+    <li><a [routerLink]="['']">Employees</a></li>
+    <li><a routerLink="['']">Teams</a></li>
+    <li><a routerLink="['']">Contracts</a></li>
+    <li><a routerLink="['']">Analytics</a></li>
+    <li><a routerLink="['']">Task Management </a></li>
+    <li><a routerLink="['']">Tracker</a></li>
+    <li><a routerLink="['']">Search for employees</a></li>
+    <li><a routerLink="['']"> Human recourse</a></li>
+    <li><a routerLink="['']">Attendance</a></li>
+    <li><a routerLink="['']">Orders</a></li>
+  </ul>
+  <div class="absolute bottom">
+    <ul>
+      <li><a routerLink="['']">Setting</a></li>
+      <li><a routerLink="['']">Close</a></li>
+    </ul>
+  </div>
+</nav>

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

@@ -0,0 +1,27 @@
+@mixin sid-nav-theme() {
+  app-side-nav {
+    nav {
+      //   width: 100px;
+      height: 100%;
+      background-color: $main-color;
+      border-radius: 20px;
+      padding-top: 10px;
+      position: relative;
+      ul {
+        list-style: none;
+        color: $white-color;
+        padding: 40px 0;
+        li {
+          a {
+            color: $white-color;
+            text-decoration: none;
+            transition: all 0.5s;
+            &:hover {
+              color: $light-blue;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SideNavComponent } from './side-nav.component';
+
+describe('SideNavComponent', () => {
+  let component: SideNavComponent;
+  let fixture: ComponentFixture<SideNavComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SideNavComponent]
+    });
+    fixture = TestBed.createComponent(SideNavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-side-nav',
+  templateUrl: './side-nav.component.html',
+  styleUrls: ['./side-nav.component.scss']
+})
+export class SideNavComponent {
+
+}

src/app/modules/dashboard/dashboard-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard.component';
+
+const routes: Routes = [{ path: '', component: DashboardComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DashboardRoutingModule {}

src/app/modules/dashboard/dashboard.component.html

@@ -0,0 +1,2 @@
+<p>dashboard works!</p>
+<router-outlet></router-outlet>

src/app/modules/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DashboardComponent]
+    });
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/dashboard/dashboard.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent {
+
+}

src/app/modules/dashboard/dashboard.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { DashboardComponent } from './dashboard.component';
+
+
+@NgModule({
+  declarations: [
+    DashboardComponent
+  ],
+  imports: [
+    CommonModule,
+    DashboardRoutingModule
+  ]
+})
+export class DashboardModule { }

src/app/modules/modules-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ModulesComponent } from './modules.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ModulesComponent,
+    children: [
+      {
+        path: 'dashboard',
+        loadChildren: () =>
+          import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full',
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ModulesRoutingModule {}

src/app/modules/modules.component.html

@@ -0,0 +1,9 @@
+<mat-drawer-container class="h-100">
+  <mat-drawer mode="side" opened>
+    <app-side-nav></app-side-nav>
+  </mat-drawer>
+  <mat-drawer-content>
+    <app-header></app-header>
+    <router-outlet></router-outlet>
+  </mat-drawer-content>
+</mat-drawer-container>

src/app/modules/modules.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModulesComponent } from './modules.component';
+
+describe('ModulesComponent', () => {
+  let component: ModulesComponent;
+  let fixture: ComponentFixture<ModulesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ModulesComponent]
+    });
+    fixture = TestBed.createComponent(ModulesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/modules.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-modules',
+  templateUrl: './modules.component.html',
+  styleUrls: ['./modules.component.scss']
+})
+export class ModulesComponent {
+
+}

src/app/modules/modules.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ModulesRoutingModule } from './modules-routing.module';
+import { ModulesComponent } from './modules.component';
+import { HeaderComponent } from './components/header/header.component';
+import { SideNavComponent } from './components/side-nav/side-nav.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [ModulesComponent, HeaderComponent, SideNavComponent],
+  imports: [CommonModule, ModulesRoutingModule, SharedModule],
+})
+export class ModulesModule {}

src/app/shared/shared.module.ts

@@ -11,6 +11,7 @@ import { NgxOtpInputModule } from 'ngx-otp-input';
 import { WarningComponent } from './components/warning/warning.component';
 import { FileUploadComponent } from './components/file-upload/file-upload.component';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSidenavModule } from '@angular/material/sidenav';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -20,6 +21,7 @@ const MATERIAL_MODULES = [
   MatInputModule,
   NgxOtpInputModule,
   MatCheckboxModule,
+  MatSidenavModule,
   // ErrorStateMatcher,
 ];
 

src/assets/scss/variables.scss

@@ -74,6 +74,7 @@ $warning-color: #e732321c;
 @import "../../app/authentication/auth-sign-in/auth-sign-in-theme.scss";
 @import "../../app/authentication/auth-sign-up/auth-sign-up.component.scss";
 @import "../../app/shared/components/warning/warning.component.scss";
+@import "../../app/modules/components/side-nav/side-nav.component.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -82,6 +83,7 @@ $warning-color: #e732321c;
   @include auth-sign-in-theme();
   @include signUp-theme();
   @include warning-theme();
+  @include sid-nav-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -117,3 +117,15 @@ input.mat-input-element {
 .bold {
   font-family: Montserrat-Bold;
 }
+
+.h-100 {
+  height: 100%;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.bottom {
+  bottom: 2rem;
+}