From c03df4f388822518445507ab03c944c608186948 Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Fri, 5 Jul 2024 13:13:53 +0200
Subject: [PATCH] Menu is closing on smartphones now when a menu item is
 clicked

---
 src/common/components/NavbarComponent.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/common/components/NavbarComponent.vue b/src/common/components/NavbarComponent.vue
index 2c5e640..cadbc45 100644
--- a/src/common/components/NavbarComponent.vue
+++ b/src/common/components/NavbarComponent.vue
@@ -5,15 +5,15 @@
     </button>
     <ul v-if="isMenuOpen || windowWidth > 768">
       <li v-for="item in menu" :key="item.name" @click="toggleSubmenu(item.name)">
-        <router-link :to="item.link" v-if="item.link">
+        <router-link :to="item.link" v-if="item.link" @click="closeMenu">
           {{ item.name }}
         </router-link>
-        <span v-if="!item.link">
+        <span v-if="!item.link" class="pointer">
           {{ item.name }}
         </span>
         <transition name="fade">
           <div v-if="item.submenu && item.submenu.length && (isSubmenuOpen[item.name] || windowWidth > 768)" class="dropdown-content">
-            <router-link v-for="subitem in item.submenu" :key="subitem.name" :to="subitem.link">
+            <router-link v-for="subitem in item.submenu" :key="subitem.name" :to="subitem.link" @click="closeMenu">
               {{ subitem.name }}
             </router-link>
           </div>
@@ -60,6 +60,13 @@ export default {
       }
     };
 
+    const closeMenu = () => {
+        isMenuOpen.value = false;
+        Object.keys(isSubmenuOpen).forEach(key => {
+          isSubmenuOpen[key] = false;
+        });
+    }
+
     const handleResize = () => {
       windowWidth.value = window.innerWidth;
       if (windowWidth.value > 768) {
@@ -84,7 +91,8 @@ export default {
       windowWidth,
       menu,
       toggleMenu,
-      toggleSubmenu
+      toggleSubmenu,
+      closeMenu
     };
   }
 };
@@ -210,10 +218,14 @@ export default {
     opacity: 1;
     visibility: visible;
     display: none;
+    padding-left: 1em;
   }
 
   .navbar li:hover .dropdown-content {
     display: block;
   }
 }
+.pointer {
+  cursor: pointer;
+}
 </style>