diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b010408..1d32c95 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 013a9d2..fdca986 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html deleted file mode 100644 index 9c5fce9..0000000 --- a/src/app/dashboard/dashboard.component.html +++ /dev/null @@ -1 +0,0 @@ -

dashboard works!

diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index 843c80f..0000000 --- a/src/app/dashboard/dashboard.component.ts +++ /dev/null @@ -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 { - } - -} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 4e9a849..a427a69 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -21,7 +21,7 @@ Forgot Password - diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html new file mode 100644 index 0000000..bf124f1 --- /dev/null +++ b/src/app/tabs/tabs.component.html @@ -0,0 +1,29 @@ +
+ + +
+ + search icon +
+ +
+ user icon + Hi, Joe Ghatto + chevron down image +
+ +
+ +
+ + + +
\ No newline at end of file diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss new file mode 100644 index 0000000..7b6be11 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/tabs/tabs.component.spec.ts similarity index 55% rename from src/app/dashboard/dashboard.component.spec.ts rename to src/app/tabs/tabs.component.spec.ts index 5ec4ff8..e1ec61a 100644 --- a/src/app/dashboard/dashboard.component.spec.ts +++ b/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; +describe('TabsComponent', () => { + let component: TabsComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DashboardComponent ] + declarations: [ TabsComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(DashboardComponent); + fixture = TestBed.createComponent(TabsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/tabs/tabs.component.ts b/src/app/tabs/tabs.component.ts new file mode 100644 index 0000000..5bc065b --- /dev/null +++ b/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 { + } + +} diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg index c39bd2f..81d1723 100644 --- a/src/assets/icons/home.svg +++ b/src/assets/icons/home.svg @@ -1,3 +1,3 @@ - + diff --git a/src/styles.scss b/src/styles.scss index 85a5c8b..3330940 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,6 +9,10 @@ outline: none; } +button, a { + cursor: pointer; +} + :root { font-size: 62.5%; --primary: #6d654e;