feat: moves user's name and email to dropdown (#2479)

amir20 · Nov 7, 2023 · d469066 · d469066
1 parent 4380681
commit d469066
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/assets/components/PageWithLinks.vue b/assets/components/PageWithLinks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-8 px-4 py-8 md:px-8">
+  <div class="flex flex-col gap-8 px-4 py-4 md:px-8">
     <section>
       <links />
     </section>

diff --git a/assets/components/common/Dropdown.vue b/assets/components/common/Dropdown.vue
@@ -3,7 +3,7 @@
     <summary class="btn btn-primary flex-nowrap" v-bind="$attrs">
       <slot name="trigger"> {{ values[modelValue] ?? defaultLabel }} <carbon:caret-down /></slot>
     </summary>
-    <ul class="menu dropdown-content rounded-box z-50 w-52 bg-base p-2 shadow">
+    <ul class="menu dropdown-content rounded-box z-50 mt-1 w-52 border border-base-content/20 bg-base p-2 shadow">
       <slot>
         <li v-for="item in options">
           <a @click="modelValue = item.value">

diff --git a/assets/components/common/Links.vue b/assets/components/common/Links.vue
@@ -12,13 +12,29 @@
       </router-link>
     </template>
     <template v-if="config.user">
-      <div v-if="config.authProvider === 'simple'">
-        <button @click.prevent="logout()" class="link-primary">{{ $t("button.logout") }}</button>
+      <div class="dropdown dropdown-end">
+        <label tabindex="0" class="btn btn-circle btn-sm">
+          <img class="h-10 w-10 max-w-none rounded-full p-1 ring-2 ring-base-content/50" :src="config.user.avatar" />
+        </label>
+        <div
+          tabindex="0"
+          class="dropdown-content rounded-box z-50 mt-1 w-52 border border-base-content/20 bg-base p-2 shadow"
+        >
+          <div class="p-2">
+            <div class="font-bold">
+              {{ config.user.name }}
+            </div>
+            <div class="text-sm font-light">
+              {{ config.user.email }}
+            </div>
+          </div>
+          <ul class="menu mt-4 p-0">
+            <li v-if="config.authProvider === 'simple'">
+              <button @click.prevent="logout()" class="text-primary">{{ $t("button.logout") }}</button>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div>
-        {{ config.user.name ? config.user.name : config.user.email }}
-      </div>
-      <img class="h-10 w-10 rounded-full p-1 ring-2 ring-base-content/50" :src="config.user.avatar" />
     </template>
   </div>
 </template>