Sidebar is closed when links are clicked on mobile

app/layouts/default/Sidebar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useSidebar } from "~/components/ui/sidebar";
 import { useRuntimeConfig } from "#app";
 import { BookOpen, BookOpenText, ChevronRight, HandCoins, Settings2, SquareTerminal } from "lucide-vue-next";
 
@@ -99,6 +100,14 @@ const props = withDefaults(defineProps<SidebarLayoutProps>(), {
 const navMain = computed(() => props.navItems || data.navMain);
 
 const config = useRuntimeConfig();
+
+const { isMobile, setOpenMobile } = useSidebar();
+
+const closeSidebarOnMobile = () => {
+  if (isMobile.value) {
+    setOpenMobile(false);
+  }
+};
 </script>
 
 <template>
@@ -107,7 +116,7 @@ const config = useRuntimeConfig();
       <SidebarMenu>
         <SidebarMenuItem>
           <SidebarMenuButton size="lg" as-child>
-            <NuxtLink to="/">
+            <NuxtLink to="/" @click="closeSidebarOnMobile">
               <div
                 class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
               >
@@ -147,7 +156,7 @@ const config = useRuntimeConfig();
                 <SidebarMenuSub>
                   <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
                     <SidebarMenuSubButton as-child>
-                      <NuxtLink :to="subItem.url">
+                      <NuxtLink :to="subItem.url" @click="closeSidebarOnMobile">
                         <span>{{ subItem.title }}</span>
                       </NuxtLink>
                     </SidebarMenuSubButton>