refactor: auto-close mobile sidebar on click

Author: wilfredinni

src/components/layout/TheSidebarMobile.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 const isOpen = ref(false)
 const navigation = useNavigationStore()
+
+// const route = useRoute()
+watch(useRoute(), () => (isOpen.value = false))
 </script>
 
 <template>
@@ -68,19 +71,16 @@ const navigation = useNavigationStore()
               <the-sidebar-navigation
                 :navigation="navigation.mainNavigation"
                 section-name="Introduction"
-                @on-click="isOpen = false"
               />
 
               <the-sidebar-navigation
                 :navigation="navigation.cheatsheetNavigation"
                 section-name="Cheatsheet"
-                @on-click="isOpen = false"
               />
 
               <the-sidebar-navigation
                 :navigation="navigation.standardLibraryNavigation"
                 section-name="Standard Library"
-                @on-click="isOpen = false"
               />
             </nav>
           </nav>

src/components/layout/TheSidebarNavigation.vue

@@ -5,18 +5,18 @@ interface Navigation {
   [key: string]: any
 }
 
-const emit = defineEmits(['on-click'])
+// const emit = defineEmits(['on-click'])
 
 defineProps<{
   sectionName: string
   navigation: Array<Navigation>
 }>()
 
-const router = useRouter()
-const navigate = (item: Navigation) => {
-  router.push(item.path)
-  emit('on-click')
-}
+// const router = useRouter()
+// const navigate = (item: Navigation) => {
+//   router.push(item.path)
+//   emit('on-click')
+// }
 </script>
 
 <template>
@@ -27,17 +27,17 @@ const navigate = (item: Navigation) => {
     class="mt-2 mb-6 space-y-2 border-l-2 border-slate-100 text-base dark:border-slate-800 lg:mt-4 lg:space-y-1.5 lg:border-slate-200 lg:text-sm"
   >
     <li v-for="item in navigation" :key="item.name" class="relative">
-      <a
-        class="-ml-px block cursor-pointer border-l border-transparent pl-4 transition duration-150"
+      <router-link
+        :to="item.path"
+        class="-ml-px block border-l border-transparent pl-4 transition duration-150"
         :class="
           $route.path === item.path
             ? 'border-current font-semibold text-sky-500 dark:text-sky-400'
             : 'text-slate-700 hover:border-slate-400 hover:text-slate-900 dark:text-slate-400 dark:hover:border-slate-500 dark:hover:text-slate-300'
         "
-        @click="navigate(item)"
       >
         {{ item.name }}
-      </a>
+      </router-link>
     </li>
   </ul>
 </template>