auto close mobile sidebar menu

Author: daniel-cintra

stubs/resources/js/Components/AppSideBar.vue

@@ -21,7 +21,8 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import useIsMobile from '@/Composables/useIsMobile'
 
 const props = defineProps({
     placement: {
@@ -50,15 +51,30 @@ const props = defineProps({
     }
 })
 
-defineEmits(['sidebar:toggle'])
+const emit = defineEmits(['sidebar:toggle'])
+
+const isVisible = ref(true)
 
 onMounted(() => {
+    document.addEventListener('inertia:start', hideMenuOnNavigation)
+
     if (!props.startsVisible) {
         isVisible.value = false
     }
 })
 
-const isVisible = ref(true)
+onUnmounted(() => {
+    document.removeEventListener('inertia:start', hideMenuOnNavigation)
+})
+
+const { isMobile } = useIsMobile()
+const hideMenuOnNavigation = () => {
+    if (isMobile.value && isVisible.value) {
+        window.setTimeout(() => {
+            emit('sidebar:toggle')
+        }, 200)
+    }
+}
 
 const baseClasses = computed(() => {
     const base = [

stubs/resources/js/Composables/useIsMobile.js

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+export default function useIsMobile() {
+    const isMobile = ref(false)
+    const width = window.innerWidth
+
+    if (width <= 1024) {
+        isMobile.value = true
+    }
+
+    return { isMobile }
+}

stubs/resources/js/Layouts/AuthenticatedLayout.vue

@@ -3,7 +3,7 @@
 
     <AppSideBar
         ref="sidebarRef"
-        :backdrop="showBackdrop"
+        :backdrop="isMobile"
         @sidebar:toggle="sidebarToggle"
     >
         <Link :href="route('dashboard.index')" class="mb-6 flex pl-2">
@@ -36,15 +36,16 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { Head } from '@inertiajs/vue3'
+import useIsMobile from '@/Composables/useIsMobile'
 import menu from '@/Configs/menu'
 
 const isSideBarOpen = ref(true)
 const sidebarRef = ref()
 
-const width = window.innerWidth
+const { isMobile } = useIsMobile()
 
 onMounted(() => {
-    if (width <= 1024) {
+    if (isMobile.value) {
         sidebarToggle()
     }
 })
@@ -54,9 +55,5 @@ const sidebarToggle = () => {
     sidebarRef.value.toggle()
 }
 
-const showBackdrop = computed(() => {
-    return width <= 1024 ? true : false
-})
-
 const items = menu.items
 </script>