Fixed dropdowns behavior

FinWave-App · Dec 8, 2023 · 23abf02 · 23abf02
1 parent 2f3ca17
commit 23abf02
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 29 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -20,6 +20,10 @@
     @apply bg-base-200;
 }
 
+body {
+    @apply bg-base-200;
+}
+
 .templateBorder {
     @apply border-4 border-dashed border-base-content border-opacity-30;
 }

diff --git a/components/nav/menu/menu.vue b/components/nav/menu/menu.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="gap-2 px-1">
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
@@ -10,7 +10,7 @@
       </nuxt-link>
     </li>
 
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/notes">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
@@ -20,7 +20,7 @@
       </nuxt-link>
     </li>
 
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/tags">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
@@ -31,7 +31,7 @@
       </nuxt-link>
     </li>
 
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/transactions">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z" />
@@ -41,7 +41,7 @@
       </nuxt-link>
     </li>
 
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/recurring">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
@@ -51,7 +51,7 @@
       </nuxt-link>
     </li>
 
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/currencies">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -61,7 +61,7 @@
       </nuxt-link>
     </li>
 
-    <li>
+    <li @click="handleClick">
       <nuxt-link to="/analytics">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
@@ -74,7 +74,12 @@
 </template>
 
 <script setup>
-
+const handleClick = () => {
+  const elem = document.activeElement;
+  if (elem) {
+    elem?.blur();
+  }
+};
 </script>
 
 <style scoped>

diff --git a/components/nav/navigation.vue b/components/nav/navigation.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="navbar bg-base-100 shadow">
     <div class="navbar-start gap-2">
-      <div class="dropdown">
-        <label tabindex="0" class="btn btn-ghost xl:hidden">
+      <div class="dropdown dropdown-hover">
+        <div tabindex="0" role="button" class="btn btn-ghost xl:hidden">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
-        </label>
+        </div>
 
-        <nav-menu tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 px-2 gap-1 shadow bg-base-100 rounded-box w-52 z-[2]">
+        <nav-menu tabindex="0" class="menu menu-compact dropdown-content p-2 px-2 gap-1 shadow bg-base-100 rounded-box w-52 z-[2]">
         </nav-menu>
       </div>
 
@@ -33,10 +33,11 @@
 <script>
 import User from "~/components/nav/user/user.vue";
 import Theme from "~/components/nav/user/theme.vue";
+import Avatar from "~/components/nav/user/avatar.vue";
 
 export default {
   name: "navigation",
-  components: {Theme, User}
+  components: {Avatar, Theme, User}
 }
 </script>
 

diff --git a/components/nav/user/theme.vue b/components/nav/user/theme.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="flex flex-col justify-center items-center">
-    <div class="dropdown dropdown-end">
-      <label tabindex="0" class="cursor-pointer">
+    <div class="dropdown dropdown-end dropdown-hover">
+      <div tabindex="0" role="button" class="cursor-pointer">
         <theme-icon :theme="currentTheme"/>
-      </label>
+      </div>
       <ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-base-100 rounded-box w-52">
-        <li>
+        <li @click="handleClick">
           <div class="flex gap-2 rounded-xl" :class="{ 'bg-base-200' : currentTheme === 'system' }" @click="currentTheme = 'system'">
             <theme-icon :theme="'system'"/>
 
             {{ $t("navigation.themes.system") }}
           </div>
         </li>
-        <li>
+        <li @click="handleClick">
 
           <div class="flex gap-2 rounded-xl" :class="{ 'bg-base-200' : currentTheme === 'dark' }" @click="currentTheme = 'dark'">
             <theme-icon :theme="'dark'"/>
 
             {{ $t("navigation.themes.dark") }}
           </div>
         </li>
-        <li>
+        <li @click="handleClick">
           <div class="flex gap-2 rounded-xl" :class="{ 'bg-base-200' : currentTheme === 'light' }" @click="currentTheme = 'light'">
             <theme-icon :theme="'light'"/>
 
@@ -55,6 +55,13 @@ watch(currentTheme, (value) => {
   document.querySelector('html').setAttribute('data-theme', value);
 })
 
+const handleClick = () => {
+  const elem = document.activeElement;
+  if (elem) {
+    elem?.blur();
+  }
+};
+
 </script>
 
 <style scoped>

diff --git a/components/nav/user/user.vue b/components/nav/user/user.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col justify-center items-center">
-    <div class="dropdown dropdown-end">
-      <label tabindex="0" class="cursor-pointer">
+    <div class="dropdown dropdown-end dropdown-hover">
+      <div tabindex="0" role="button" class="cursor-pointer m-1">
         <avatar :avatar-letter="avatarLetter" :username="username"/>
-      </label>
+      </div>
       <ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-base-100 rounded-box w-52">
-        <li v-if="adminAllowed">
+        <li v-if="adminAllowed" @click="handleClick">
           <nuxt-link to="admin">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
@@ -14,7 +14,7 @@
             {{ $t("navigation.userButtons.admin") }}
           </nuxt-link>
         </li>
-        <li>
+        <li @click="handleClick">
           <a @click="changePasswordOpened = true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
@@ -23,7 +23,7 @@
             {{ $t("navigation.userButtons.changePassword") }}
           </a>
         </li>
-        <li>
+        <li @click="handleClick">
           <a @click="sessionsOpened = true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
@@ -32,7 +32,7 @@
             {{ $t("navigation.userButtons.sessions") }}
           </a>
         </li>
-        <li>
+        <li @click="handleClick">
           <a @click="notificationsOpened = true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
@@ -41,7 +41,7 @@
             {{ $t("navigation.userButtons.notifications") }}
           </a>
         </li>
-        <li>
+        <li @click="handleClick">
           <a @click="logout">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
@@ -77,6 +77,13 @@ const logout = () => {
   $userApi.logout();
 }
 
+const handleClick = () => {
+  const elem = document.activeElement;
+  if (elem) {
+    elem?.blur();
+  }
+};
+
 </script>
 
 <style scoped>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -23,6 +23,7 @@ useSeoMeta({
   description: 'A convenient open source service for financial accounting',
   ogDescription: 'A convenient open source service for financial accounting'
 })
+
 </script>
 
 <style scoped>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "finwave",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": true,
   "scripts": {
     "build": "nuxt build",

diff --git a/public/manifest.json b/public/manifest.json
@@ -2,7 +2,7 @@
   "name": "FinWave App",
   "short_name": "FinWave",
   "start_url": "/",
-  "display": "fullscreen",
+  "display": "standalone",
   "gcm_sender_id": "103953800507",
   "icons": [
     {