Sidebar is closed when links are clicked on mobile

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>