tabs page

src/app/app-routing.module.ts

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

src/app/app.module.ts

@@ -4,13 +4,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    DashboardComponent
+    TabsComponent
   ],
   imports: [
     BrowserModule,

src/app/dashboard/dashboard.component.html

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

src/app/dashboard/dashboard.component.ts

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

src/app/login/login.component.html

@@ -21,7 +21,7 @@
             <a href="#"> Forgot Password </a>
         </div>
         
-        <button class="form-button" [routerLink]="['/dashboard']">
+        <button class="form-button" [routerLink]="['/tabs']">
             Login
         </button>
 

src/app/tabs/tabs.component.html

@@ -0,0 +1,29 @@
+<section class="navbar">
+    <figure class="logo">
+        <img src="assets/icons/logo.svg" alt="logo image">
+    </figure>
+
+    <div class="search-input">
+        <input type="text" placeholder="Search for Business Entities">
+        <img src="assets/icons/search.svg" alt="search icon">
+    </div>
+
+    <section class="profile-actions">
+        <img src="assets/icons/user.svg" alt="user icon">
+        <span> Hi, Joe Ghatto </span>
+        <img src="assets/icons/chevron-down.svg" alt="chevron down image">
+    </section>
+
+</section>
+
+<section class="tabs">
+    <button class="active">
+        <img src="assets/icons/home.svg" alt="home icon">
+    </button>
+    <button>
+        <img src="assets/icons/dashboard.svg" alt="dashboard icon">
+    </button>
+    <button>
+        <img src="assets/icons/tiles-dashboard.svg" alt="tiles dashboard icon">
+    </button>
+</section>

src/app/tabs/tabs.component.scss

@@ -0,0 +1,114 @@
+.navbar {
+    display: flex;
+    width: 100%;
+    height: 10rem;
+    align-items: center;
+    justify-content: flex-start;
+
+    .logo {
+        width: 12rem;
+        margin: 0 2rem;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .search-input {
+        position: relative;
+        margin-left: auto;
+
+        input {
+            display: block;
+            height: 5rem;
+            border: 1px solid var(--border-grey);
+            border-radius: 4rem;
+            padding: 0 2.5rem;
+            width: 35rem;
+            font-size: 1.5rem;
+            font-weight: 300;
+
+            &::placeholder {
+                color: var(--dark-grey);
+                opacity: 0.6;
+            }
+        }
+
+        img {
+            position: absolute;
+            width: 1.8rem;
+            top: 1.5rem;
+            right: 1.8rem;
+        }
+    }
+
+    .profile-actions {
+        margin: 0 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 5rem;
+        border-radius: 4rem;
+        padding: 0 2rem;
+        position: relative;
+        overflow: hidden;
+        width: 20rem;
+        
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--secondary);
+            opacity: 0.3;
+            filter: brightness(110%);
+        }
+
+        & > * {
+            position: relative;
+        }
+
+        img {
+            width: 1.5rem;
+        }
+
+        span {
+            margin: 0 auto;
+            color: var(--primary);
+            font-size: 1.4rem;
+        }
+    }
+}
+
+
+.tabs {
+    position: fixed;
+    height: calc(100% - 10rem);
+    top: 10rem;
+    left: 4rem;
+    background-color: var(--primary);
+    border-radius: 5rem;
+    width: 7rem;
+    overflow: hidden;
+
+    button {
+        display: block;
+        width: 100%;
+        background-color: transparent;
+        border: 0px;
+        margin: 4rem 0;
+
+        img {
+            width: 1.8rem;
+        }
+
+        &.active {
+            img {
+                opacity: 0.6;
+            }
+        }
+    }
+}

src/app/dashboard/dashboard.component.spec.ts → src/app/tabs/tabs.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DashboardComponent } from './dashboard.component';
+import { TabsComponent } from './tabs.component';
 
-describe('DashboardComponent', () => {
-  let component: DashboardComponent;
-  let fixture: ComponentFixture<DashboardComponent>;
+describe('TabsComponent', () => {
+  let component: TabsComponent;
+  let fixture: ComponentFixture<TabsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DashboardComponent ]
+      declarations: [ TabsComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardComponent);
+    fixture = TestBed.createComponent(TabsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/tabs/tabs.component.ts

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

src/assets/icons/home.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19.752" viewBox="0 0 18 19.752">
-  <path id="home" d="M23.333,11.084,14.852,4.516a.655.655,0,0,0-.809.007L5.833,11.09a.655.655,0,0,0-.245.51V23.478a.653.653,0,0,0,.654.654h4.88a.654.654,0,0,0,.654-.654V16.206H17.4v7.272a.654.654,0,0,0,.654.654h4.881a.654.654,0,0,0,.654-.654V11.6a.652.652,0,0,0-.254-.517Z" transform="translate(-5.588 -4.379)" fill="#c4b57b"/>
+  <path id="home" d="M23.333,11.084,14.852,4.516a.655.655,0,0,0-.809.007L5.833,11.09a.655.655,0,0,0-.245.51V23.478a.653.653,0,0,0,.654.654h4.88a.654.654,0,0,0,.654-.654V16.206H17.4v7.272a.654.654,0,0,0,.654.654h4.881a.654.654,0,0,0,.654-.654V11.6a.652.652,0,0,0-.254-.517Z" transform="translate(-5.588 -4.379)" fill="#f0ead1"/>
 </svg>

src/styles.scss

@@ -9,6 +9,10 @@
     outline: none;
 }
 
+button, a {
+    cursor: pointer;
+}
+
 :root {
     font-size: 62.5%;
     --primary: #6d654e;