From a4ca5f2da9bda828df8f8901b07bf1affb793b3e Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Sun, 13 Jun 2021 04:56:49 +0200
Subject: [PATCH] UI split menu avatar and dark mode toggle
---
components/layout/LayoutHeader.vue | 2 ++
components/layout/LayoutHeaderMenuAvatar.vue | 27 ++++----------------
nuxt.config.js | 1 +
3 files changed, 8 insertions(+), 22 deletions(-)
diff --git a/components/layout/LayoutHeader.vue b/components/layout/LayoutHeader.vue
index 47b9d9fb..ae5df3fd 100644
--- a/components/layout/LayoutHeader.vue
+++ b/components/layout/LayoutHeader.vue
@@ -9,6 +9,8 @@
<div class="flex justify-end items-center relative">
<LayoutHeaderMenu />
+ <AppDarkMode />
+
<LayoutHeaderMenuAvatar />
</div>
</nav>
diff --git a/components/layout/LayoutHeaderMenuAvatar.vue b/components/layout/LayoutHeaderMenuAvatar.vue
index bbe04d21..88afd312 100644
--- a/components/layout/LayoutHeaderMenuAvatar.vue
+++ b/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">
diff --git a/nuxt.config.js b/nuxt.config.js
index c50f381e..c373c593 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -89,6 +89,7 @@ export default {
'faExpandArrowsAlt',
'faFont',
'faWheelchair',
+ 'faCaretDown',
],
brands: [
'faCreativeCommonsNcEu',
--
GitLab