Skip to content
Snippets Groups Projects
Commit a4ca5f2d authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

UI split menu avatar and dark mode toggle

parent 91fd2bf9
No related branches found
No related tags found
No related merge requests found
......@@ -9,6 +9,8 @@
<div class="flex justify-end items-center relative">
<LayoutHeaderMenu />
<AppDarkMode />
<LayoutHeaderMenuAvatar />
</div>
</nav>
......
......@@ -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">
......
......@@ -89,6 +89,7 @@ export default {
'faExpandArrowsAlt',
'faFont',
'faWheelchair',
'faCaretDown',
],
brands: [
'faCreativeCommonsNcEu',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment