Notes details page

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { WelcomeComponent } from './welcome/welcome.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { DetailsComponent } from './tabs/courses/details/details.component';
 import { VideoChapterComponent } from './tabs/courses/video-chapter/video-chapter.component';
+import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-details.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -12,7 +13,8 @@ const routes: Routes = [
     { component: TabsComponent, path: 'tabs/:subpage' },
     { component: DetailsComponent, path: 'course-details' },
     { component: DetailsComponent, path: 'course-details/:heading' },
-    { component: VideoChapterComponent, path: 'video-chapter/:heading' }
+    { component: VideoChapterComponent, path: 'video-chapter/:heading' },
+    { component: NotesDetailsComponent, path: 'notes-details/:heading' }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { ReportsComponent } from './tabs/reports/reports.component';
 import { MoreComponent } from './tabs/more/more.component';
 import { DetailsComponent } from './tabs/courses/details/details.component';
 import { VideoChapterComponent } from './tabs/courses/video-chapter/video-chapter.component';
+import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-details.component';
 
 @NgModule({
 	declarations: [
@@ -25,6 +26,7 @@ import { VideoChapterComponent } from './tabs/courses/video-chapter/video-chapte
 		MoreComponent,
 		DetailsComponent,
 		VideoChapterComponent,
+		NotesDetailsComponent,
 	],
 	imports: [
 		BrowserModule,

src/app/tabs/courses/notes-details/notes-details.component.html

@@ -0,0 +1,30 @@
+<div class="page">
+    <header class="nav-header">
+        <button class="close-button" (click)="back()">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+        </button>
+        <h5>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+            <span> {{ heading }} </span>
+        </h5>
+    </header>
+
+    <h2> {{ heading }} </h2>
+
+    <div class="description">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum saepe itaque quisquam, maxime!
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit odit rerum.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eos explicabo soluta voluptatibus fugit expedita omnis optio tempore at iure odio aliquid, quibusdam, voluptas aspernatur harum libero sequi nam quidem.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam officiis iusto ipsa, adipisci porro ipsam. Repellendus itaque pariatur rem quia quisquam neque iure amet, deleniti, nesciunt veritatis, fugit ipsam magni.
+        </p>
+    </div>
+
+    <button class="next-button" [routerLink]="['/notes-details/Notes-3']"> GO TO NEXT NOTES </button>
+</div>

src/app/tabs/courses/notes-details/notes-details.component.scss

@@ -0,0 +1,89 @@
+.page {
+    background-color: var(--black);
+    height: 100vh;
+    padding-bottom: 60px;
+    overflow: auto;
+}
+
+.nav-header {
+    background-color: var(--ash-black);
+    display: flex;
+    align-items: center;
+    padding: 0 5%;
+    height: 60px;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+
+    .close-button {
+        border: 0px;
+        background-color: transparent;
+        .icon {
+            width: 16px;
+            height: 16px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin-left: 20px;
+        letter-spacing: 1px;
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: white;
+            margin-right: 3px;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+    }
+}
+
+h2 {
+    padding: 0 5%;
+    font-size: 22px;
+    margin: 20px auto 10px;
+    color: white;
+    font-weight: 400;
+}
+
+.description {
+    width: 90%;
+    margin: 0 auto;
+    color: white;
+
+    p {
+        margin-bottom: 20px;
+        font-size: 14px;
+        line-height: 2;
+    }
+}
+
+.next-button {
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    background-color: var(--ash-black);
+    color: var(--light-grey);
+    font-size: 14px;
+    width: 100%;
+    height: 50px;
+    border: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 0px 5px var(--black);
+
+    .icon {
+        width: 20px;
+        height: 20px;
+        fill: var(--light-grey);
+        margin-right: 5px;
+    }
+}

src/app/tabs/courses/notes-details/notes-details.component.spec.ts

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

src/app/tabs/courses/notes-details/notes-details.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-notes-details',
+  templateUrl: './notes-details.component.html',
+  styleUrls: ['./notes-details.component.scss']
+})
+export class NotesDetailsComponent implements OnInit {
+    heading: string;
+    routeSubscription: Subscription;
+
+    constructor(
+        private route: ActivatedRoute,
+        private location: Location
+    ) { }
+
+    ngOnInit(): void {
+        this.routeSubscription = this.route.params.subscribe((params) => {
+            this.heading = params['heading'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.routeSubscription.unsubscribe();
+    }
+
+    back() {
+        this.location.back();
+    }
+
+}

src/app/tabs/courses/video-chapter/video-chapter.component.html

@@ -60,7 +60,7 @@
         </ul>
 
         <ul class="notes-list" *ngIf="selectedSegment === 'notes'">
-            <li>
+            <li [routerLink]="['/notes-details', 'Notes-1']">
                 <div class="content">
                     <label> Notes 1 </label>
                     <p>
@@ -70,7 +70,7 @@
                 <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
             </li>
 
-            <li>
+            <li [routerLink]="['/notes-details', 'Notes-2']">
                 <div class="content">
                     <label> Notes 2 </label>
                     <p>
@@ -80,9 +80,9 @@
                 <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
             </li>
 
-            <li>
+            <li [routerLink]="['/notes-details', 'Notes-3']">
                 <div class="content">
-                    <label> Notes 2 </label>
+                    <label> Notes 3 </label>
                     <p>
                         quidem minima dolor delectus optio, dicta.
                     </p>