Tabs 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/app.module.ts

@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AngularSvgIconModule } from 'angular-svg-icon';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -24,6 +25,7 @@ import { MoreComponent } from './tabs/more/more.component';
 	imports: [
 		BrowserModule,
 		AppRoutingModule,
+        HttpClientModule,
 		AngularSvgIconModule.forRoot()
 	],
 	providers: [],

src/app/tabs/tabs.component.html

@@ -1,2 +1,21 @@
-<p>tabs works!</p>
-<app-home></app-home>
+<section class="tabs">
+    <button>
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/home.svg"></svg-icon>
+        <span> Home </span>
+    </button>
+    <button>
+        <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>
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/newspaper.svg"></svg-icon>
+        <span> Reports </span>
+    </button>
+    <button>
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+        <span> More </span>
+    </button>
+</section>

src/app/tabs/tabs.component.scss

@@ -0,0 +1,53 @@
+.tabs {
+    display: flex;
+    width: 100%;
+    height: 60px;
+    align-items: stretch;
+    background-color: var(--black);
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    padding: 0 5%;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+
+    button {
+        border: 0px;
+        width: calc(90vw / 5);
+        display: block;
+        background-color: transparent;
+        display: block;
+        text-align: center;
+
+        &.mid-button {
+            height: calc(90vw / 5);
+            background-color: white;
+            border-radius: 50%;
+            position: relative;
+            transform: translateY(calc(-90vw / 13))scale(0.9);
+            box-shadow: 0px 0px 5px var(--black);
+
+            .icon {
+                fill: var(--teal);
+                width: 25px;
+                height: 25px;
+            }
+        }
+
+        span {
+            display: block;
+            margin-top: 5px;
+            color: white;
+            font-size: 10px;
+        }
+    }
+
+    .icon {
+        margin: 0 auto;
+        display: block;
+        width: 15px;
+        height: 15px;
+        fill: white;
+    }
+}

src/assets/custom-icons/home.svg

@@ -1 +1 @@
-<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m498.195312 222.695312c-.011718-.011718-.023437-.023437-.035156-.035156l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.8125-33.328126-13.8125-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.140626.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.445312 13.238281 31.277344 13.746093.480468.046876.964843.070313 1.453124.070313h8.324219v153.699219c0 30.414062 24.746094 55.160156 55.167969 55.160156h81.710938c8.28125 0 15-6.714844 15-15v-120.5c0-13.878906 11.289062-25.167969 25.167968-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.285156 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.160156v-153.699219h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.808594 18.359375-18.371093 18.367187-48.253906.023437-66.636719zm0 0"/></svg>
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m498.195312 222.695312c-.011718-.011718-.023437-.023437-.035156-.035156l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.8125-33.328126-13.8125-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.140626.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.445312 13.238281 31.277344 13.746093.480468.046876.964843.070313 1.453124.070313h8.324219v153.699219c0 30.414062 24.746094 55.160156 55.167969 55.160156h81.710938c8.28125 0 15-6.714844 15-15v-120.5c0-13.878906 11.289062-25.167969 25.167968-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.285156 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.160156v-153.699219h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.808594 18.359375-18.371093 18.367187-48.253906.023437-66.636719zm0 0"/></svg>

src/assets/custom-icons/more.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
+<g>
+	<g>
+		<circle cx="42.667" cy="213.333" r="42.667"/>
+	</g>
+</g>
+<g>
+	<g>
+		<circle cx="213.333" cy="213.333" r="42.667"/>
+	</g>
+</g>
+<g>
+	<g>
+		<circle cx="384" cy="213.333" r="42.667"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>