fix: auto close the navigation (#195)

Author: thamudi

components/MobileMenuItems.vue

@@ -5,19 +5,51 @@
         class="py-4 border-gray"
         v-if="config.public.TARGET_ENV === 'development'"
       >
-        <NuxtLink to="/register" class="nav-link">Join JOSA</NuxtLink>
+        <NuxtLink
+          @click="
+            () => {
+              emit('toggleNav')
+            }
+          "
+          to="/register"
+          class="nav-link"
+          >Join JOSA</NuxtLink
+        >
       </li>
       <li class="py-4 border-gray">
-        <NuxtLink to="/members" class="nav-link">JOSA Members</NuxtLink>
+        <NuxtLink
+          @click="
+            () => {
+              emit('toggleNav')
+            }
+          "
+          to="/members"
+          class="nav-link"
+          >JOSA Members</NuxtLink
+        >
       </li>
       <li
         class="py-4 border-gray"
         v-if="config.public.TARGET_ENV === 'development'"
       >
-        <NuxtLink to="/missions" class="nav-link">Contribute</NuxtLink>
+        <NuxtLink
+          @click="
+            () => {
+              emit('toggleNav')
+            }
+          "
+          to="/missions"
+          class="nav-link"
+          >Contribute</NuxtLink
+        >
       </li>
       <li class="py-4">
         <NuxtLink
+          @click="
+            () => {
+              emit('toggleNav')
+            }
+          "
           id="login"
           to="/login"
           class="nav-link"
@@ -29,6 +61,7 @@
   </div>
 </template>
 <script setup>
+const emit = defineEmits(['toggleNav'])
 const config = useRuntimeConfig()
 const props = defineProps({
   isOpen: Boolean,

components/PageHeader.vue

@@ -33,15 +33,23 @@
               <NuxtLink to="/missions" class="nav-link">Contribute</NuxtLink>
             </li>
             <li class="menu-item">
-              <NuxtLink id="login" to="/login" class="nav-link" v-if="!useAuth().value"
+              <NuxtLink
+                id="login"
+                to="/login"
+                class="nav-link"
+                v-if="!useAuth().value"
                 >Sign In</NuxtLink
               >
-              <UserWidget v-else/>
+              <UserWidget v-else />
             </li>
           </ul>
           <MobileMenuButton :is-open="state.isOpen" @toggle="ToggleIsOpen()" />
         </div>
-        <MobileMenuItems :is-open="state.isOpen" />
+        <MobileMenuItems
+          @toggleNav="ToggleIsOpen()"
+          :is-open="state.isOpen"
+          ()
+        />
       </div>
     </nav>
   </header>
@@ -53,6 +61,9 @@ const state = reactive({
   isOpen: false,
 })
 const ToggleIsOpen = () => (state.isOpen = !state.isOpen)
+onMounted(() => {
+  state.isOpen = false
+})
 </script>
 <style lang="postcss" scoped>
 * {