From c3cfc11f5fdaa585a7e209b394df0679af7f11aa Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Sat, 20 May 2023 15:26:15 +0200
Subject: [PATCH] dropdown menu

---
 src/components/TopBar.vue | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index add4244..cb2efda 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -58,18 +58,29 @@ const authModalInitialStateOpen = ref(
               <button class="btn-sm btn" @click="close">Close</button>
             </template>
           </Modal>
-          <Modal v-else-if="user">
-            <template #activator="{ open }">
-              <button class="btn-outline btn-sm btn py-1 text-white" @click="open">
-                {{ user.displayName || user.email }}
-              </button>
-            </template>
-            <template #default>Are you sure want to signout?</template>
-            <template #actions="{ close }">
-              <button class="btn-sm btn" @click="close">Close</button>
-              <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
-            </template>
-          </Modal>
+          <template v-else-if="user">
+            <div class="dropdown-end dropdown">
+              <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
+                <!-- {{ user.displayName || user.email }} -->
+                <i class="fa-fw fa-solid fa-user-gear" />
+              </label>
+              <ul
+                tabindex="0"
+                class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
+              >
+                <Modal>
+                  <template #activator="{ open }">
+                    <li @click="open"><a><i class="fa-fw fa-solid fa-right-from-bracket" />Sign out</a></li>
+                  </template>
+                  <template #default>Are you sure want to signout?</template>
+                  <template #actions="{ close }">
+                    <button class="btn-sm btn" @click="close">Close</button>
+                    <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
+                  </template>
+                </Modal>
+              </ul>
+            </div>
+          </template>
         </template>
         <SkeletonTopBar v-else />
       </div>