Tabs and navbar UI

src/app/app-routing.module.ts

@@ -1,12 +1,20 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
+import { RegisterBusinessComponent } from './register-business/register-business.component';
 import { TabsComponent } from './tabs/tabs.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'login' },
     { component: LoginComponent, path: 'login' },
-    { component: TabsComponent, path: 'tabs' },
+    { component: TabsComponent, path: 'tabs', children : [
+        {
+            path: '', pathMatch: 'full', redirectTo: 'register-business'
+        }, {
+            path: 'register-business',
+            component: RegisterBusinessComponent,
+        }]
+    },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -5,12 +5,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { TabsComponent } from './tabs/tabs.component';
+import { RegisterBusinessComponent } from './register-business/register-business.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    TabsComponent
+    TabsComponent,
+    // RegisterBusinessComponent
   ],
   imports: [
     BrowserModule,

src/app/register-business/register-business.component.html

@@ -0,0 +1 @@
+<p>register-business works!</p>

src/app/register-business/register-business.component.spec.ts

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

src/app/register-business/register-business.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-register-business',
+  templateUrl: './register-business.component.html',
+  styleUrls: ['./register-business.component.scss']
+})
+export class RegisterBusinessComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/tabs/tabs.component.html

@@ -26,4 +26,7 @@
     <button>
         <img src="assets/icons/tiles-dashboard.svg" alt="tiles dashboard icon">
     </button>
+    <button>
+        <img src="assets/icons/settings.svg" alt="settings icon">
+    </button>
 </section>

src/app/tabs/tabs.component.scss

@@ -86,20 +86,27 @@
 
 .tabs {
     position: fixed;
-    height: calc(100% - 10rem);
+    height: calc(100% - 12rem);
     top: 10rem;
     left: 4rem;
     background-color: var(--primary);
     border-radius: 5rem;
     width: 7rem;
     overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 
     button {
         display: block;
         width: 100%;
         background-color: transparent;
         border: 0px;
-        margin: 4rem 0;
+        margin: 2.5rem 0;
+
+        &:last-child {
+            margin-top: auto;
+        }
 
         img {
             width: 1.8rem;