Skip to content

Commit 545082b

Browse files
thisiszoaibthisiszoaib
committed
Added routes and pages
1 parent 72fb831 commit 545082b

27 files changed

+19483
-131
lines changed

‎package-lock.json

+19,128-43
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@angular/platform-browser": "~11.2.0",
2222
"@angular/platform-browser-dynamic": "~11.2.0",
2323
"@angular/router": "~11.2.0",
24+
"@ngneat/until-destroy": "^8.0.0",
2425
"rxjs": "~6.6.0",
2526
"tailwindcss": "^2.0.3",
2627
"tslib": "^2.0.0",
@@ -45,4 +46,4 @@
4546
"tslint": "~6.1.0",
4647
"typescript": "~4.1.2"
4748
}
48-
}
49+
}

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

+34-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,41 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
3+
import { AboutComponent } from './pages/about/about.component';
4+
import { HelpComponent } from './pages/help/help.component';
5+
import { HomeComponent } from './pages/home/home.component';
6+
import { NotFoundComponent } from './pages/not-found/not-found.component';
7+
import { ProfileComponent } from './pages/profile/profile.component';
38

4-
const routes: Routes = [];
9+
const routes: Routes = [
10+
{
11+
path: '',
12+
pathMatch: 'full',
13+
redirectTo: 'home',
14+
},
15+
{
16+
path: 'home',
17+
component: HomeComponent,
18+
},
19+
{
20+
path: 'profile',
21+
component: ProfileComponent,
22+
},
23+
{
24+
path: 'about',
25+
component: AboutComponent,
26+
},
27+
{
28+
path: 'help',
29+
component: HelpComponent,
30+
},
31+
{
32+
path: '**',
33+
component: NotFoundComponent,
34+
},
35+
];
536

637
@NgModule({
738
imports: [RouterModule.forRoot(routes)],
8-
exports: [RouterModule]
39+
exports: [RouterModule],
940
})
10-
export class AppRoutingModule { }
41+
export class AppRoutingModule {}

‎src/app/app.component.html

+41-40
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,50 @@
11
<mat-toolbar class="mat-elevation-z8">
2-
<button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()">
3-
<mat-icon *ngIf="!sidenav.opened">
4-
menu
5-
</mat-icon>
6-
<mat-icon *ngIf="sidenav.opened">
7-
close
8-
</mat-icon>
9-
</button>
10-
Responsive side navigation
2+
<button
3+
mat-icon-button
4+
*ngIf="sidenav.mode === 'over'"
5+
(click)="sidenav.toggle()"
6+
>
7+
<mat-icon *ngIf="!sidenav.opened"> menu </mat-icon>
8+
<mat-icon *ngIf="sidenav.opened"> close </mat-icon>
9+
</button>
10+
Responsive side navigation
1111
</mat-toolbar>
1212

1313
<mat-sidenav-container>
14-
<mat-sidenav #sidenav="matSidenav" class="mat-elevation-z8">
15-
16-
<img class="avatar mat-elevation-z8" src="https://source.unsplash.com/c_GmwfHBDzk/200x200" />
14+
<mat-sidenav #sidenav="matSidenav" class="mat-elevation-z8">
15+
<img
16+
class="avatar mat-elevation-z8"
17+
src="https://source.unsplash.com/c_GmwfHBDzk/200x200"
18+
/>
1719

18-
<h4 class="name">John Smith</h4>
19-
<p class="designation">Software Engineer</p>
20+
<h4 class="name">John Smith</h4>
21+
<p class="designation">Software Engineer</p>
2022

21-
<mat-divider></mat-divider>
23+
<mat-divider></mat-divider>
2224

23-
<button mat-button class="menu-button">
24-
<mat-icon>home</mat-icon>
25-
<span>Home</span>
26-
</button>
27-
<button mat-button class="menu-button">
28-
<mat-icon>person</mat-icon>
29-
<span>Profile</span>
30-
</button>
31-
<button mat-button class="menu-button">
32-
<mat-icon>info</mat-icon>
33-
<span>About</span>
34-
</button>
35-
36-
<mat-divider></mat-divider>
25+
<button mat-button class="menu-button" routerLink="/home">
26+
<mat-icon>home</mat-icon>
27+
<span>Home</span>
28+
</button>
29+
<button mat-button class="menu-button" routerLink="/profile">
30+
<mat-icon>person</mat-icon>
31+
<span>Profile</span>
32+
</button>
33+
<button mat-button class="menu-button" routerLink="/about">
34+
<mat-icon>info</mat-icon>
35+
<span>About</span>
36+
</button>
3737

38-
<button mat-button class="menu-button">
39-
<mat-icon>help</mat-icon>
40-
<span>Help</span>
41-
</button>
38+
<mat-divider></mat-divider>
4239

43-
</mat-sidenav>
44-
<mat-sidenav-content>
45-
<div class="content mat-elevation-z8">
46-
Main content here!
47-
</div>
48-
</mat-sidenav-content>
49-
</mat-sidenav-container>
40+
<button mat-button class="menu-button" routerLink="/help">
41+
<mat-icon>help</mat-icon>
42+
<span>Help</span>
43+
</button>
44+
</mat-sidenav>
45+
<mat-sidenav-content>
46+
<div class="content mat-elevation-z8">
47+
<router-outlet></router-outlet>
48+
</div>
49+
</mat-sidenav-content>
50+
</mat-sidenav-container>

‎src/app/app.component.scss

+37-40
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,66 @@
11
mat-toolbar {
2-
background: #004a9f;
3-
color: white;
2+
background: #004a9f;
3+
color: white;
44
}
55

66
mat-sidenav {
7-
margin: 16px;
8-
width: 200px;
9-
border-right: none;
10-
background: #002b5c;
11-
color: white;
12-
border-radius: 10px;
13-
padding: 16px;
14-
text-align: center;
7+
margin: 16px;
8+
width: 200px;
9+
border-right: none;
10+
background: #002b5c;
11+
color: white;
12+
border-radius: 10px;
13+
padding: 16px;
14+
text-align: center;
1515
}
1616

1717
.content {
18-
height: calc(100vh - 98px);
19-
border-radius: 10px;
20-
margin: 16px;
21-
margin-left: 32px;
18+
height: calc(100vh - 130px);
19+
border-radius: 10px;
20+
margin: 16px;
21+
margin-left: 32px;
2222

23-
display: flex;
24-
justify-content: center;
25-
align-items: center;
23+
padding: 16px;
2624

27-
font-size: 2rem;
28-
color: lightgray;
25+
overflow: auto;
2926
}
3027

3128
mat-sidenav-container {
32-
height: calc(100vh - 65px);
29+
height: calc(100vh - 65px);
3330
}
3431

3532
.menu-button {
36-
width: 100%;
37-
display: flex;
38-
align-items: center;
39-
justify-content: flex-start;
40-
font-size: 1rem;
33+
width: 100%;
34+
display: flex;
35+
align-items: center;
36+
justify-content: flex-start;
37+
font-size: 1rem;
4138

42-
mat-icon {
43-
margin-right: 8px;
44-
}
39+
mat-icon {
40+
margin-right: 8px;
41+
}
4542
}
4643

4744
.avatar {
48-
margin-top: 16px;
49-
width: 100px;
50-
height: 100px;
51-
border-radius: 50%;
45+
margin-top: 16px;
46+
width: 100px;
47+
height: 100px;
48+
border-radius: 50%;
5249
}
5350

5451
.name {
55-
margin-top: 8px;
56-
font-weight: normal;
52+
margin-top: 8px;
53+
font-weight: normal;
5754
}
5855

5956
.designation {
60-
margin-top: 2px;
61-
font-size: 0.7rem;
62-
color: lightgrey;
57+
margin-top: 2px;
58+
font-size: 0.7rem;
59+
color: lightgrey;
6360
}
6461

6562
mat-divider {
66-
margin-top: 16px;
67-
margin-bottom: 16px;
68-
background-color: rgba(255, 255, 255, 0.5);
63+
margin-top: 16px;
64+
margin-bottom: 16px;
65+
background-color: rgba(255, 255, 255, 0.5);
6966
}

‎src/app/app.component.ts

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { BreakpointObserver } from '@angular/cdk/layout';
33
import { MatSidenav } from '@angular/material/sidenav';
4-
import { delay } from 'rxjs/operators';
4+
import { delay, filter } from 'rxjs/operators';
5+
import { NavigationEnd, Router } from '@angular/router';
6+
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
57

8+
@UntilDestroy()
69
@Component({
710
selector: 'app-root',
811
templateUrl: './app.component.html',
@@ -12,12 +15,12 @@ export class AppComponent {
1215
@ViewChild(MatSidenav)
1316
sidenav!: MatSidenav;
1417

15-
constructor(private observer: BreakpointObserver) {}
18+
constructor(private observer: BreakpointObserver, private router: Router) {}
1619

1720
ngAfterViewInit() {
1821
this.observer
1922
.observe(['(max-width: 800px)'])
20-
.pipe(delay(1))
23+
.pipe(delay(1), untilDestroyed(this))
2124
.subscribe((res) => {
2225
if (res.matches) {
2326
this.sidenav.mode = 'over';
@@ -27,5 +30,16 @@ export class AppComponent {
2730
this.sidenav.open();
2831
}
2932
});
33+
34+
this.router.events
35+
.pipe(
36+
untilDestroyed(this),
37+
filter((e) => e instanceof NavigationEnd)
38+
)
39+
.subscribe(() => {
40+
if (this.sidenav.mode === 'over') {
41+
this.sidenav.close();
42+
}
43+
});
3044
}
3145
}

‎src/app/app.module.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,14 @@ import { MatSidenavModule } from '@angular/material/sidenav';
99
import { MatButtonModule } from '@angular/material/button';
1010
import { MatIconModule } from '@angular/material/icon';
1111
import { MatDividerModule } from '@angular/material/divider';
12+
import { HomeComponent } from './pages/home/home.component';
13+
import { ProfileComponent } from './pages/profile/profile.component';
14+
import { AboutComponent } from './pages/about/about.component';
15+
import { HelpComponent } from './pages/help/help.component';
16+
import { NotFoundComponent } from './pages/not-found/not-found.component';
1217

1318
@NgModule({
14-
declarations: [AppComponent],
19+
declarations: [AppComponent, HomeComponent, ProfileComponent, AboutComponent, HelpComponent, NotFoundComponent],
1520
imports: [
1621
BrowserModule,
1722
AppRoutingModule,

‎src/app/pages/about/about.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<h2>About page</h2>
2+
<p>Some text here</p>
3+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
4+
<h3>Some footer text</h3>

‎src/app/pages/about/about.component.scss

Whitespace-only changes.

‎src/app/pages/about/about.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { AboutComponent } from './about.component';
4+
5+
describe('AboutComponent', () => {
6+
let component: AboutComponent;
7+
let fixture: ComponentFixture<AboutComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ AboutComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(AboutComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/pages/about/about.component.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-about',
5+
templateUrl: './about.component.html',
6+
styleUrls: ['./about.component.scss']
7+
})
8+
export class AboutComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎src/app/pages/help/help.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<h2>Help page</h2>
2+
<p>Some text here</p>
3+
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
4+
<h3>Some footer text</h3>

‎src/app/pages/help/help.component.scss

Whitespace-only changes.

‎src/app/pages/help/help.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { HelpComponent } from './help.component';
4+
5+
describe('HelpComponent', () => {
6+
let component: HelpComponent;
7+
let fixture: ComponentFixture<HelpComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ HelpComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(HelpComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)