Courses UI

src/app/app-routing.module.ts

@@ -6,7 +6,8 @@ import { TabsComponent } from './tabs/tabs.component';
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
     { component: WelcomeComponent, path: 'welcome' },
-    { component: TabsComponent, path: 'tabs' }
+    { component: TabsComponent, path: 'tabs' },
+    { component: TabsComponent, path: 'tabs/:subpage' }
 ];
 
 @NgModule({

src/app/tabs/courses/courses.component.html

@@ -1 +1,52 @@
-<p>courses works!</p>
+<header> Main Courses: </header>
+<ul>
+    <li>
+        <h2> ENG </h2>
+
+        <div class="details">
+            <h5> English </h5>
+            <p> Chapter: 21 </p>
+            <div class="progress-holder"> <span class="progress"></span> </div>
+        </div>
+    </li>
+
+    <li>
+        <h2> KAN </h2>
+
+        <div class="details">
+            <h5> Kannada </h5>
+            <p> Chapter: 21 </p>
+            <div class="progress-holder"> <span class="progress"></span> </div>
+        </div>
+    </li>
+
+    <li>
+        <h2> BIO </h2>
+
+        <div class="details">
+            <h5> Biology </h5>
+            <p> Chapter: 21 </p>
+            <div class="progress-holder"> <span class="progress"></span> </div>
+        </div>
+    </li>
+
+    <li>
+        <h2> PHY </h2>
+
+        <div class="details">
+            <h5> Physics </h5>
+            <p> Chapter: 21 </p>
+            <div class="progress-holder"> <span class="progress"></span> </div>
+        </div>
+    </li>
+
+    <li>
+        <h2> CHEM </h2>
+
+        <div class="details">
+            <h5> Chemistry </h5>
+            <p> Chapter: 21 </p>
+            <div class="progress-holder"> <span class="progress"></span> </div>
+        </div>
+    </li>
+</ul>

src/app/tabs/courses/courses.component.scss

@@ -0,0 +1,74 @@
+header {
+    padding: 0 7%;
+    color: white;
+    font-size: 18px;
+    position: relative;
+    margin-top: 50px;
+}
+
+ul {
+    list-style: none;
+    width: 90%;
+    margin: 0 auto;
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    position: relative;
+    flex-wrap: wrap;
+
+    li {
+        width: 42vw;
+        height: 37vw;
+        padding: 15px;
+        background-color: white;
+        border-radius: 15px;
+        margin-top: 6vw;
+        box-shadow: 0px 0px 5px var(--light-grey);
+        position: relative;
+    }
+
+    .details {
+        position: absolute;
+        bottom: 0px;
+        left: 0;
+        padding: 15px;
+        width: 100%;
+    }
+
+    h2 {
+        font-size: 26px;
+        color: var(--teal-green);
+        opacity: 0.7;
+        font-weight: 700;
+    }
+
+    h5 {
+        color: var(--black);
+        font-weight: 500;
+        font-size: 14px;
+    }
+
+    p {
+        color: var(--dark-grey);
+        font-size: 12px;
+    }
+
+    .progress-holder {
+        position: relative;
+        height: 5px;
+        background-color: #cecece;
+        border-radius: 30px;
+        overflow: hidden;
+        width: 100%;
+        margin-top: 10px;
+
+        .progress {
+            background-color: var(--green);
+            width: 50%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    }
+}

src/app/tabs/tabs.component.html

@@ -1,24 +1,25 @@
 <div class="page">
     <app-home *ngIf="selectedTab === 'home'"></app-home>
+    <app-courses *ngIf="selectedTab === 'courses'"></app-courses>
 </div>
 
 <section class="tabs">
-    <button (click)="selectedTab='home'" [ngClass]="{'active' : selectedTab === 'home'}">
+    <button [routerLink]="['/tabs/home']" [ngClass]="{'active' : selectedTab === 'home'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/home.svg"></svg-icon>
         <span> Home </span>
     </button>
-    <button (click)="selectedTab='courses'" [ngClass]="{'active' : selectedTab === 'courses'}">
+    <button [routerLink]="['/tabs/courses']" [ngClass]="{'active' : selectedTab === 'courses'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/mortarboard.svg"></svg-icon>
         <span> Courses </span>
     </button>
     <button class="mid-button">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/book.svg"></svg-icon>
     </button>
-    <button (click)="selectedTab='reports'" [ngClass]="{'active' : selectedTab === 'reports'}">
+    <button [routerLink]="['/tabs/reports']" [ngClass]="{'active' : selectedTab === 'reports'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/newspaper.svg"></svg-icon>
         <span> Reports </span>
     </button>
-    <button (click)="selectedTab='more'" [ngClass]="{'active' : selectedTab === 'more'}">
+    <button [routerLink]="['/tabs/more']" [ngClass]="{'active' : selectedTab === 'more'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
         <span> More </span>
     </button>

src/app/tabs/tabs.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
 	selector: 'app-tabs',
@@ -6,11 +8,21 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./tabs.component.scss']
 })
 export class TabsComponent implements OnInit {
-    selectedTab: string = 'home';
+    selectedTab: string;
+    routeSubscription: Subscription;
 
-	constructor() { }
+	constructor(
+        private route: ActivatedRoute
+    ) { }
 
 	ngOnInit(): void {
+        this.routeSubscription = this.route.params.subscribe((params) => {
+            this.selectedTab = params['subpage'] ? params['subpage'] : 'home';
+        });
 	}
 
+    ngOnDestroy() {
+        this.routeSubscription.unsubscribe();
+    }
+
 }

src/app/welcome/welcome.component.html

@@ -71,5 +71,5 @@
         </li>
     </ul>
 
-    <button [routerLink]="['/tabs']" class="start-button"> All right let's Start! </button>
+    <button [routerLink]="['/tabs/home']" class="start-button"> All right let's Start! </button>
 </div>