From 37228e00aa79ead4339c1c506bc8b5e6012d069c Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 21 Jul 2023 19:14:38 +0100
Subject: [PATCH] feat(dui3): wip header menu

---
 packages/dui3/components/header/NavBar.vue   |  4 +---
 packages/dui3/components/header/UserMenu.vue | 17 +++++++++++++++--
 packages/dui3/components/user/Avatar.vue     |  1 +
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index d9abd708d..788df9521 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -20,6 +20,4 @@
     </div>
   </nav>
 </template>
-<script setup lang="ts">
-const { $showDevTools } = useNuxtApp()
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index 2ad7d4887..161d0ec90 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -45,6 +45,17 @@
               Test Page
             </NuxtLink>
           </MenuItem>
+          <MenuItem as="div" class="p-2">
+            <FormButton
+              full-width
+              size="sm"
+              color="card"
+              :icon-right="CogIcon"
+              @click="$showDevTools"
+            >
+              Show Dev Tools
+            </FormButton>
+          </MenuItem>
           <MenuItem as="div" class="border border-t-1">Hai</MenuItem>
         </MenuItems>
       </Transition>
@@ -52,14 +63,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { XMarkIcon, CogIcon } from '@heroicons/vue/20/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
 
+const { $showDevTools } = useNuxtApp()
+
 const { defaultAccount } = useInjectedAccounts()
 
 const user = computed(() => {
-  if (!defaultAccount.value) return { name: 'loading', avatar: undefined }
+  if (!defaultAccount.value) return undefined
   return {
     name: defaultAccount.value?.accountInfo.userInfo.name,
     avatar: defaultAccount.value?.accountInfo.userInfo.avatar
diff --git a/packages/dui3/components/user/Avatar.vue b/packages/dui3/components/user/Avatar.vue
index a21020dce..9d623086e 100644
--- a/packages/dui3/components/user/Avatar.vue
+++ b/packages/dui3/components/user/Avatar.vue
@@ -26,6 +26,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { UserCircleIcon } from '@heroicons/vue/20/solid'
 type UserAvatar = {
   name: string
   avatar?: string