From 0ab02d831ee22b1fcbae19e301b77951336819de Mon Sep 17 00:00:00 2001
From: Thomas Rittson <trittson@bitwarden.com>
Date: Wed, 13 Apr 2022 11:27:39 +1000
Subject: [PATCH] Use bit-menu for account menu

---
 src/app/layouts/navbar.component.html | 42 +++++++++------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index b73ccf1f..128f18b0 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -36,17 +36,13 @@
     </div>
     <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
       <li class="nav-item dropdown">
-        <a
-          class="nav-item nav-link dropdown-toggle"
-          href="#"
-          id="nav-profile"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
+        <button
+          [bitMenuTriggerFor]="accountMenu"
+          class="tw-border-0 tw-bg-transparent tw-text-contrast"
         >
           <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
-        </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
+        </button>
+        <bit-menu #accountMenu>
           <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
             <app-avatar
               [data]="name"
@@ -57,42 +53,32 @@
             ></app-avatar>
             <div class="ml-2 overflow-hidden">
               <span>{{ "loggedInAs" | i18n }}</span>
-              <small class="text-muted">{{ name }}</small>
+              <small class="tw-text-muted">{{ name }}</small>
             </div>
           </div>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="#" routerLink="/settings/account">
+          <bit-menu-divider></bit-menu-divider>
+          <a bit-menu-item routerLink="/settings/account">
             <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
             {{ "myAccount" | i18n }}
           </a>
-          <a
-            class="dropdown-item"
-            href="https://bitwarden.com/help/"
-            target="_blank"
-            rel="noopener"
-          >
+          <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
             <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
             {{ "getHelp" | i18n }}
           </a>
-          <a
-            class="dropdown-item"
-            href="https://bitwarden.com/download/"
-            target="_blank"
-            rel="noopener"
-          >
+          <a bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
             <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
             {{ "getApps" | i18n }}
           </a>
-          <div class="dropdown-divider"></div>
-          <button type="button" class="dropdown-item" (click)="lock()">
+          <bit-menu-divider></bit-menu-divider>
+          <button bit-menu-item type="button" (click)="lock()">
             <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
             {{ "lockNow" | i18n }}
           </button>
-          <button type="button" class="dropdown-item" (click)="logOut()">
+          <button bit-menu-item type="button" (click)="logOut()">
             <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
             {{ "logOut" | i18n }}
           </button>
-        </div>
+        </bit-menu>
       </li>
     </ul>
   </div>