Sidebar UI and added children routes

src/app/app-routing.module.ts

@@ -1,12 +1,28 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { GraphComponent } from './dashboard/graph/graph.component';
+import { ReportComponent } from './dashboard/report/report.component';
+import { SettingsComponent } from './dashboard/settings/settings.component';
+import { TableComponent } from './dashboard/table/table.component';
 import { LoginComponent } from './login/login.component';
 
 const routes: Routes = [
-    { path: '', redirectTo: 'login', pathMatch: 'full' },
+    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
     { path: 'login', component: LoginComponent },
-    { path: 'dashboard', component: DashboardComponent },
+    { path: 'dashboard', component: DashboardComponent, children: [
+        {
+            path: '', pathMatch: 'full', redirectTo: 'graph'
+        }, {
+            path: 'graph', component: GraphComponent
+        }, {
+            path: 'partners', component: TableComponent
+        }, {
+            path: 'report', component: ReportComponent
+        }, {
+            path: 'settings', component: SettingsComponent
+        }
+    ] },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -6,12 +6,20 @@ import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { GraphComponent } from './dashboard/graph/graph.component';
+import { TableComponent } from './dashboard/table/table.component';
+import { ReportComponent } from './dashboard/report/report.component';
+import { SettingsComponent } from './dashboard/settings/settings.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    DashboardComponent
+    DashboardComponent,
+    GraphComponent,
+    TableComponent,
+    ReportComponent,
+    SettingsComponent
   ],
   imports: [
     BrowserModule,

src/app/dashboard/dashboard.component.html

@@ -1 +1,18 @@
-<p>dashboard works!</p>
+<div class="container">
+    <section class="sidebar">
+        <figure class="logo" [routerLink]="'graph'">
+            <img src="assets/logo.png" alt="cac logo">
+        </figure>
+        
+        <nav>
+            <a [ngClass]="{'active' : currentURL.includes('graph')}" [routerLink]="'graph'"> <span> Dashboard </span> </a>
+            <a [ngClass]="{'active' : currentURL.includes('partners')}" [routerLink]="'partners'"> <span> All Partners </span> </a>
+            <a [ngClass]="{'active' : currentURL.includes('report')}" [routerLink]="'report'"> <span> Report </span> </a>
+            <a [ngClass]="{'active' : currentURL.includes('settings')}" [routerLink]="'settings'"> <span> Settings </span> </a>
+        </nav>
+    </section>
+
+    <div>
+        <router-outlet></router-outlet>
+    </div>
+</div>

src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,80 @@
+$sidebar-width: 240px;
+
+.container {
+    display: grid;
+    grid-template-columns: $sidebar-width calc(100% - $sidebar-width);
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+}
+
+.sidebar {
+    border-radius: 0;
+    height: 100vh;
+    background-color: var(--primary);
+
+    .logo {
+        width: calc(100% - 20px);
+        margin: 20px auto;
+        padding: 20px 40px;
+        display: block;
+        cursor: pointer;
+        background-color: var(--secondary);
+        border-radius: var(--common-border-radius);
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    nav {
+        padding: 0 24px;
+    }
+
+    nav a {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin: 20px 0;
+        text-decoration: none;
+        color: white;
+        font-weight: 500;
+        height: 60px;
+        padding: 0 20px;
+        border-radius: var(--common-border-radius);
+        font-size: 16px;
+        letter-spacing: 0.5px;
+        transition: transform 0.3s, background-color 0.3s, color 0.3s;
+        position: relative;
+        overflow: hidden;
+
+        &:hover {
+            color: white;
+        }
+
+        &.active {
+            transform: translateX(24px);
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+            color: white;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: var(--primary);
+                filter: brightness(0.8);
+            }
+
+            & > * {
+                position: relative;
+            }
+        }
+    }
+}

src/app/dashboard/dashboard.component.ts

@@ -1,15 +1,26 @@
 import { Component, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+    selector: 'app-dashboard',
+    templateUrl: './dashboard.component.html',
+    styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
+    currentURL: string = '';
 
-  constructor() { }
+    constructor(
+        private router: Router
+    ) { }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+        this.currentURL = this.router.url;
 
+        this.router.events.subscribe((val) => {
+            // see also 
+            if (val instanceof NavigationEnd) {
+                this.currentURL = val.url;
+            } 
+        });
+    }
 }

src/app/dashboard/graph/graph.component.html

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

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

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

src/app/dashboard/graph/graph.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-graph',
+  templateUrl: './graph.component.html',
+  styleUrls: ['./graph.component.scss']
+})
+export class GraphComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dashboard/report/report.component.html

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

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

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

src/app/dashboard/report/report.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-report',
+  templateUrl: './report.component.html',
+  styleUrls: ['./report.component.scss']
+})
+export class ReportComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dashboard/settings/settings.component.html

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

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

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

src/app/dashboard/settings/settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dashboard/table/table.component.html

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

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

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

src/app/dashboard/table/table.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss']
+})
+export class TableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/login/login.component.html

@@ -1,7 +1,9 @@
 <div class="container">
 
     <div class="card-holder">
-        <img src="assets/logo.png" alt="cac logo">
+        <figure class="logo">
+            <img src="assets/logo.png" alt="cac logo">
+        </figure>
 
         <section class="card">
 

src/app/login/login.component.scss

@@ -10,9 +10,15 @@
 .card-holder {
     width: 30vw;
     
-    img {
+    .logo {
         display: block;
+        width: 150px;
         margin: 16px auto;
+
+        img {
+            display: block;
+            object-fit: contain;
+        }
     }
 }
 

src/styles.scss

@@ -12,7 +12,6 @@
 :root {
     --primary: #2a7a99;
     --secondary: #f5e461;
-    --secondary-contrast: #f5e461;
     --primary-text: #5c5c5c;
     --secondary-text: #7b7b7b;
     --input-background: #f6f6f6;