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 @@
-
+
+
+
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;