vault flex layout

src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { LoginComponent } from './accounts/login.component';
 import { VaultComponent } from './vault/vault.component';
 
 const routes: Routes = [
-    { path: '', redirectTo: '/login', pathMatch: 'full' },
+    { path: '', redirectTo: '/vault', pathMatch: 'full' },
     { path: 'login', component: LoginComponent },
     { path: 'vault', component: VaultComponent },
 ];

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-root',
     styles: [],
-    template: 'App<br /><router-outlet></router-outlet>',
+    template: '<router-outlet></router-outlet>',
 })
 export class AppComponent {
 }

src/app/vault/vault.component.html

@@ -1 +1,67 @@
-My Vault!!
+<div id="vault">
+    <div id="nav">
+        <ul class="top">
+            <li><a href="#">V</a></li>
+            <li><a href="#">G</a></li>
+            <li><a href="#">S</a></li>
+        </ul>
+        <ul class="bottom">
+            <li><a href="#">L</a></li>
+            <li><a href="#">U</a></li>
+        </ul>
+    </div>
+    <div id="categories">
+        <div class="header">
+            Search Bar
+        </div>
+        <div class="content">
+            <div>Something</div><div>Something</div><div>Something</div>
+        </div>
+    </div>
+    <div id="items">
+        <div class="header">
+            Search Bar
+        </div>
+        <div class="content">
+            <div>Something Something Something Something Something Something</div>
+            <div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+        </div>
+        <div class="footer">
+            Add
+        </div>
+    </div>
+    <div id="details">
+        <div class="header">
+            View Item
+        </div>
+        <div class="content">
+            <div>Something Something Something Something Something Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+        </div>
+        <div class="footer">
+            Edit
+        </div>
+    </div>
+</div>

src/scss/styles.scss

@@ -1,6 +1,110 @@
-html, body {
+* {
+    box-sizing: border-box;
+}
+
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: #aaa;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+html, body {
     margin: 0;
     padding: 0;
     height: 100%;
     background-color: gray;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    font-family: Arial;
+    font-size: 14px;
+    color: #000;
+}
+
+#vault {
+    height: 100vh;
+    display: flex;
+
+    #nav {
+        background-color: #1a2226;
+        min-width: 50px;
+        color: white;
+        display: flex;
+        flex-direction: column;
+
+        ul {
+            padding: 0;
+            margin: 0;
+
+            li {
+                padding: 0;
+                margin: 0;
+                list-style: none;
+
+                a {
+                    display: block;
+                    text-align: center;
+                    padding: 20px 0;
+                    text-decoration: none;
+                    color: #fff;
+                }
+            }
+
+            &.top {
+                flex: 1;
+            }
+        }
+    }
+
+    #categories {
+        background-color: #222d32;
+        width: 15%;
+        min-width: 175px;
+        max-width: 250px;
+        color: white;
+
+        .header {
+            background-color: #367fa9;
+        }
+    }
+
+    #items {
+        background-color: #ecf0f5;
+        width: 25%;
+        min-width: 200px;
+        max-width: 350px;
+    }
+
+    #details {
+        background-color: #f9fafc;
+        flex: 1;
+        min-width: 400px;
+    }
+
+    #categories, #items, #details {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header {
+        height: 50px;
+        background-color: #3c8dbc;
+        color: #fff;
+        flex: 0 0 auto;
+    }
+
+    .content {
+        flex: 1 1 auto;
+        position: relative;
+        overflow: overlay;
+    }
+
+    .footer {
+        height: 50px;
+        background-color: #fff;
+        flex: 0 0 auto;
+    }
 }