From b9d2988e8cb2ee56fac55e6a78e7314fe62e3c03 Mon Sep 17 00:00:00 2001
From: Daan Meijer <daan@studioseptember.nl>
Date: Wed, 17 Jun 2026 00:43:26 +0200
Subject: [PATCH] feat: Auto-close mobile navigation sidebar upon successful
 user navigation

---
 resources/js/components/AppSidebar.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index a7983e2..39aabf0 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import { BookOpen, FolderGit2, LayoutGrid, Users } from '@lucide/vue';
+import { onMounted, onUnmounted } from 'vue';
 import AppLogo from '@/components/AppLogo.vue';
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
@@ -13,11 +14,30 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
+    useSidebar,
 } from '@/components/ui/sidebar';
 import { dashboard } from '@/routes';
 import { index as dynamics } from '@/routes/dynamics';
 import type { NavItem } from '@/types';
 
+const { isMobile, setOpenMobile } = useSidebar();
+
+let unregister: () => void;
+
+onMounted(() => {
+    unregister = router.on('navigate', () => {
+        if (isMobile.value) {
+            setOpenMobile(false);
+        }
+    });
+});
+
+onUnmounted(() => {
+    if (unregister) {
+        unregister();
+    }
+});
+
 const mainNavItems: NavItem[] = [
     {
         title: 'Dashboard',