made nav into a toolbar

src/app/app.module.ts

@@ -63,10 +63,11 @@ import { ShareComponent } from './vault/share.component';
 import { VaultComponent } from './vault/vault.component';
 import { ViewComponent } from './vault/view.component';
 
-import { AccessComponent } from './send/access.component';
 import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
 import { SendComponent } from './send/send.component';
 
+import { NavComponent } from './layout/nav.component';
+
 import { registerLocaleData } from '@angular/common';
 import localeBe from '@angular/common/locales/be';
 import localeBg from '@angular/common/locales/bg';
@@ -160,7 +161,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
     ],
     declarations: [
         A11yTitleDirective,
-        AccessComponent,
         AddEditComponent,
         ApiActionDirective,
         AppComponent,
@@ -183,6 +183,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         LockComponent,
         LoginComponent,
         ModalComponent,
+        NavComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
         PasswordHistoryComponent,

src/app/layout/nav.component.html

@@ -0,0 +1,5 @@
+<ng-container *ngFor="let item of items">
+    <a [routerLink]="item.link" class="btn primary" routerLinkActive="active" [title]="item.label">
+        <i class="fa" [ngClass]="item.icon"></i>{{ item.label }}
+    </a>
+</ng-container>

src/app/layout/nav.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-nav',
+    templateUrl: 'nav.component.html',
+})
+export class NavComponent {
+    items: any[] = [
+        {
+            link: '/vault',
+            icon: 'fa-lock',
+            label: 'My Vault',
+        },
+        {
+            link: '/send',
+            icon: 'fa-paper-plane',
+            label: 'Send',
+        },
+    ];
+}

src/app/send/access.component.html

@@ -1,7 +0,0 @@
-<div class="details">
-    <div clas="content">
-        <div class="inner-content">
-            <p>Under construction</p>
-        </div>
-    </div>
-</div>

src/app/send/access.component.ts

@@ -1,18 +0,0 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-
-@Component({
-    selector: 'app-send-access',
-    templateUrl: 'access.component.html',
-})
-export class AccessComponent implements OnInit {
-    constructor() {
-        return;
-    }
-
-    ngOnInit() {
-        return;
-    }
-}

src/app/send/send.component.html

@@ -3,7 +3,6 @@
         <div class="mac-bar"></div>
         <div class="content">
             <div class="inner-content">
-                <div class="top-content">
                 <h2 class="sr-only">{{'filters' | i18n}}</h2>
                 <ul>
                     <li [ngClass]="{active: selectedAll}">
@@ -26,9 +25,8 @@
                     </li>
                 </ul>
             </div>
-                <div class="bottom-content">
-                    <a routerLink="/" class="fa fa-lock btn primary icon-link" title="Bitwarden Vault"></a>
-                </div>
+            <div class="footer">
+                <app-nav class="nav"></app-nav>
             </div>
         </div>
     </div>

src/app/vault/groupings.component.html

@@ -1,7 +1,6 @@
 <div class="mac-bar"></div>
 <div class="content">
     <div class="inner-content">
-        <div class="top-content">
         <h2 class="sr-only">{{'filters' | i18n}}</h2>
         <ul>
             <li [ngClass]="{active: selectedAll}">
@@ -99,8 +98,7 @@
             </div>
         </ng-container>
     </div>
-        <div class="bottom-content">
-            <a routerLink="/send" class="fa fa-paper-plane btn primary icon-link" title="Bitwarden Send"></a>
-        </div>
+    <div class="footer">
+        <app-nav class="nav"></app-nav>
     </div>
 </div>

src/scss/buttons.scss

@@ -77,16 +77,6 @@
             text-decoration: underline;
         }
     }
-
-    &.icon-link {
-        padding: 10px;
-        font-size: 20px;
-        text-align: center;
-        text-decoration: none;
-        margin: 5px 2px;
-        border-radius: 50%;
-        width: 45px;
-    }
 }
 
 .action-buttons {

src/scss/vault.scss

@@ -24,12 +24,18 @@
             border-right-color: themed('borderColor');
         }
 
-        .inner-content {
+        .content {
             display: flex;
-            height: 100%;
             flex-direction: column;
             flex-grow: 1;
             justify-content: space-between;
+
+            .footer {
+                padding: 0;
+            }
+
+            .inner-content {
+                padding-bottom: 0;
                 padding-right: 5px;
                 user-select: none;
 
@@ -37,6 +43,7 @@
                     margin: 0 0 15px 0;
                 }
             }
+        }
 
         h2 {
             text-transform: uppercase;
@@ -418,7 +425,7 @@
     }
 
     .footer {
-        height: 50px;
+        height: 55px;
         flex: 0 0 auto;
         border-top: 1px solid #000000;
         display: flex;
@@ -443,4 +450,31 @@
             display: flex;
         }
     }
+
+    .nav {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        .btn {
+            width: 100%;
+            font-size: $font-size-base * 0.8;
+            flex: 1;
+            border: 0;
+            border-radius: 0;
+            padding-bottom: 4px;
+
+            &:not(.active) {
+                @include themify($themes) {
+                    background-color: themed('backgroundColorAlt');
+                }
+            }
+
+            i {
+                font-size: $font-size-base * 1.5;
+                display: block;
+                margin-bottom: 2px;
+                text-align: center;
+            }
+        }
+    }
 }