From ef9d1ffde029df2f8b50c58573e80aab37dc7f12 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 9 Feb 2022 04:15:44 +0530 Subject: [PATCH] Sidebar UI and added children routes --- src/app/app-routing.module.ts | 20 ++++- src/app/app.module.ts | 10 ++- src/app/dashboard/dashboard.component.html | 19 ++++- src/app/dashboard/dashboard.component.scss | 80 +++++++++++++++++++ src/app/dashboard/dashboard.component.ts | 23 ++++-- src/app/dashboard/graph/graph.component.html | 1 + src/app/dashboard/graph/graph.component.scss | 0 .../dashboard/graph/graph.component.spec.ts | 25 ++++++ src/app/dashboard/graph/graph.component.ts | 15 ++++ .../dashboard/report/report.component.html | 1 + .../dashboard/report/report.component.scss | 0 .../dashboard/report/report.component.spec.ts | 25 ++++++ src/app/dashboard/report/report.component.ts | 15 ++++ .../settings/settings.component.html | 1 + .../settings/settings.component.scss | 0 .../settings/settings.component.spec.ts | 25 ++++++ .../dashboard/settings/settings.component.ts | 15 ++++ src/app/dashboard/table/table.component.html | 1 + src/app/dashboard/table/table.component.scss | 0 .../dashboard/table/table.component.spec.ts | 25 ++++++ src/app/dashboard/table/table.component.ts | 15 ++++ src/app/login/login.component.html | 4 +- src/app/login/login.component.scss | 8 +- src/styles.scss | 1 - 24 files changed, 316 insertions(+), 13 deletions(-) create mode 100644 src/app/dashboard/graph/graph.component.html create mode 100644 src/app/dashboard/graph/graph.component.scss create mode 100644 src/app/dashboard/graph/graph.component.spec.ts create mode 100644 src/app/dashboard/graph/graph.component.ts create mode 100644 src/app/dashboard/report/report.component.html create mode 100644 src/app/dashboard/report/report.component.scss create mode 100644 src/app/dashboard/report/report.component.spec.ts create mode 100644 src/app/dashboard/report/report.component.ts create mode 100644 src/app/dashboard/settings/settings.component.html create mode 100644 src/app/dashboard/settings/settings.component.scss create mode 100644 src/app/dashboard/settings/settings.component.spec.ts create mode 100644 src/app/dashboard/settings/settings.component.ts create mode 100644 src/app/dashboard/table/table.component.html create mode 100644 src/app/dashboard/table/table.component.scss create mode 100644 src/app/dashboard/table/table.component.spec.ts create mode 100644 src/app/dashboard/table/table.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e0556a0..afcb1c1 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 45d9823..79f189e 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 9c5fce9..db470a1 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1 +1,18 @@ -

dashboard works!

+
+
+ + + +
+ +
+ +
+
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index e69de29..77c3535 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 843c80f..3adb41b 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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; + } + }); + } } diff --git a/src/app/dashboard/graph/graph.component.html b/src/app/dashboard/graph/graph.component.html new file mode 100644 index 0000000..5989ffa --- /dev/null +++ b/src/app/dashboard/graph/graph.component.html @@ -0,0 +1 @@ +

graph works!

diff --git a/src/app/dashboard/graph/graph.component.scss b/src/app/dashboard/graph/graph.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/graph/graph.component.spec.ts b/src/app/dashboard/graph/graph.component.spec.ts new file mode 100644 index 0000000..99783d4 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GraphComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/graph/graph.component.ts b/src/app/dashboard/graph/graph.component.ts new file mode 100644 index 0000000..ae46986 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/dashboard/report/report.component.html b/src/app/dashboard/report/report.component.html new file mode 100644 index 0000000..0249e9d --- /dev/null +++ b/src/app/dashboard/report/report.component.html @@ -0,0 +1 @@ +

report works!

diff --git a/src/app/dashboard/report/report.component.scss b/src/app/dashboard/report/report.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/report/report.component.spec.ts b/src/app/dashboard/report/report.component.spec.ts new file mode 100644 index 0000000..8690ec3 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ReportComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ReportComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/report/report.component.ts b/src/app/dashboard/report/report.component.ts new file mode 100644 index 0000000..6e69820 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/dashboard/settings/settings.component.html b/src/app/dashboard/settings/settings.component.html new file mode 100644 index 0000000..4ab2a41 --- /dev/null +++ b/src/app/dashboard/settings/settings.component.html @@ -0,0 +1 @@ +

settings works!

diff --git a/src/app/dashboard/settings/settings.component.scss b/src/app/dashboard/settings/settings.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/settings/settings.component.spec.ts b/src/app/dashboard/settings/settings.component.spec.ts new file mode 100644 index 0000000..a3a508b --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SettingsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/settings/settings.component.ts b/src/app/dashboard/settings/settings.component.ts new file mode 100644 index 0000000..232b5dd --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/dashboard/table/table.component.html b/src/app/dashboard/table/table.component.html new file mode 100644 index 0000000..7dd8b47 --- /dev/null +++ b/src/app/dashboard/table/table.component.html @@ -0,0 +1 @@ +

table works!

diff --git a/src/app/dashboard/table/table.component.scss b/src/app/dashboard/table/table.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/table/table.component.spec.ts b/src/app/dashboard/table/table.component.spec.ts new file mode 100644 index 0000000..e2f8acc --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TableComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/table/table.component.ts b/src/app/dashboard/table/table.component.ts new file mode 100644 index 0000000..678f062 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 241696d..45e933a 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,7 +1,9 @@
- cac logo +
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss index a69f59a..7deb13f 100644 --- a/src/app/login/login.component.scss +++ b/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; + } } } diff --git a/src/styles.scss b/src/styles.scss index 5dff243..cfe8932 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -12,7 +12,6 @@ :root { --primary: #2a7a99; --secondary: #f5e461; - --secondary-contrast: #f5e461; --primary-text: #5c5c5c; --secondary-text: #7b7b7b; --input-background: #f6f6f6;