UI split menu avatar and dark mode toggle

components/layout/LayoutHeader.vue

@@ -9,6 +9,8 @@
       <div class="flex justify-end items-center relative">
         <LayoutHeaderMenu />
 
+        <AppDarkMode />
+
         <LayoutHeaderMenuAvatar />
       </div>
     </nav>

components/layout/LayoutHeaderMenuAvatar.vue

@@ -8,34 +8,17 @@
         'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 border-gray-100 dark:border-gray-500 border transform translate-y-1',
     }"
   >
-    <div
-      slot="trigger"
-      slot-scope="{
-        mousedownHandler,
-        focusHandler,
-        blurHandler,
-        keydownHandler,
-        isShown,
-      }"
-      class="inline-flex items-center relative px-2 dark:border-gray-500 border-2 rounded-full hover:shadow-lg focus:outline-none focus:ring-2 transition-shadow"
-      :class="{ 'shadow-lg': isShown }"
-    >
-      <AppDarkMode />
-
+    <div slot="trigger" class="flex items-center ml-5">
       <button
         type="button"
         aria-label="User menu"
         aria-haspopup="true"
-        @mousedown="mousedownHandler"
-        @focus="focusHandler"
-        @blur="blurHandler"
-        @keydown="keydownHandler"
+        class="h-8 w-8 focus:ring-2 focus:outline-none rounded-full"
       >
-        <div class="flex items-center h-10 w-10 pl-3">
-          <img v-if="user" :src="user.avatar_url" class="rounded-full" />
-          <fa v-else icon="user-circle" class="text-3xl" />
-        </div>
+        <img v-if="user" :src="user.avatar_url" class="rounded-full" />
+        <fa v-else icon="user-circle" class="text-3xl" />
       </button>
+      <fa icon="caret-down" class="pl-1.5" />
     </div>
 
     <div class="my-1" style="min-width: 15rem">

nuxt.config.js

@@ -89,6 +89,7 @@ export default {
             'faExpandArrowsAlt',
             'faFont',
             'faWheelchair',
+            'faCaretDown',
           ],
           brands: [
             'faCreativeCommonsNcEu',