diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b2ea638..6e15217 100644
--- a/src/app/app-routing.module.ts
+++ b/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({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4dddf7e..f44a91c 100644
--- a/src/app/app.module.ts
+++ b/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: [],
diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html
index f467413..4360fbc 100644
--- a/src/app/tabs/tabs.component.html
+++ b/src/app/tabs/tabs.component.html
@@ -1,2 +1,21 @@
-tabs works!
-
+
+
+
+
+
+
+
diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss
index e69de29..4031e85 100644
--- a/src/app/tabs/tabs.component.scss
+++ b/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;
+ }
+}
diff --git a/src/assets/custom-icons/home.svg b/src/assets/custom-icons/home.svg
index d6d4bbe..a3c56e3 100644
--- a/src/assets/custom-icons/home.svg
+++ b/src/assets/custom-icons/home.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/assets/custom-icons/more.svg b/src/assets/custom-icons/more.svg
new file mode 100644
index 0000000..d5532dc
--- /dev/null
+++ b/src/assets/custom-icons/more.svg
@@ -0,0 +1,50 @@
+
+
+