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>

app/layouts/default/SidebarFooter.vue

@@ -16,7 +16,7 @@ import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogIn, LogOut } from "luc
 
 import type { User } from "better-auth";
 
-const { isMobile } = useSidebar();
+const { isMobile, setOpenMobile } = useSidebar();
 
 const props = defineProps<{ user?: User | null | undefined }>();
 
@@ -28,12 +28,9 @@ const userInititials = computed(() => {
     .join("");
 });
 
-const handleLogout = () => {
-  navigateTo("/auth/logout");
-};
-
-const handleLogin = () => {
-  navigateTo("/auth/login");
+const handleAuthNavigation = (action: string) => {
+  setOpenMobile(false);
+  navigateTo(`/auth/${action}`);
 };
 </script>
 
@@ -93,7 +90,7 @@ const handleLogin = () => {
                 </DropdownMenuItem>
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
-              <DropdownMenuItem @click="handleLogout">
+              <DropdownMenuItem @click="handleAuthNavigation('logout')">
                 <LogOut />
                 Log out
               </DropdownMenuItem>
@@ -136,7 +133,7 @@ const handleLogin = () => {
                 </div>
               </DropdownMenuLabel>
               <DropdownMenuSeparator />
-              <DropdownMenuItem @click="handleLogin">
+              <DropdownMenuItem @click="handleAuthNavigation('login')">
                 <LogIn />
                 Log in
               </DropdownMenuItem>