ZERADO

src/layout/AppSidebar.vue

@@ -1,66 +1,73 @@
 <script setup>
-import { useLayout } from '@/layout/composables/layout';
-import { onBeforeUnmount, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import AppMenu from './AppMenu.vue';
+import { useLayout } from '@/layout/composables/layout'
+import { onBeforeUnmount, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import AppMenu from './AppMenu.vue'
 
-const { layoutState, isDesktop, hasOpenOverlay } = useLayout();
-const route = useRoute();
-const sidebarRef = ref(null);
-let outsideClickListener = null;
+const { layoutState, isDesktop, hasOpenOverlay, closeMenuOnNavigate } = useLayout()
+const route = useRoute()
+const sidebarRef = ref(null)
+let outsideClickListener = null
 
+// ✅ rota mudou:
+// - atualiza activePath sempre (desktop e mobile)
+// - fecha menu SOMENTE no mobile (evita “sumir” no desktop / inconsistências)
 watch(
-    () => route.path,
-    (newPath) => {
-        if (isDesktop()) layoutState.activePath = null;
-        else layoutState.activePath = newPath;
-
-        layoutState.overlayMenuActive = false;
-        layoutState.mobileMenuActive = false;
-        layoutState.menuHoverActive = false;
-    },
-    { immediate: true }
-);
+  () => route.path,
+  (newPath) => {
+    layoutState.activePath = newPath
+    closeMenuOnNavigate?.()
+  },
+  { immediate: true }
+)
 
+// mantém o outside click só quando overlay está aberto e estamos em desktop
 watch(hasOpenOverlay, (newVal) => {
-    if (isDesktop()) {
-        if (newVal) bindOutsideClickListener();
-        else unbindOutsideClickListener();
-    }
-});
+  if (isDesktop()) {
+    if (newVal) bindOutsideClickListener()
+    else unbindOutsideClickListener()
+  }
+})
 
 const bindOutsideClickListener = () => {
-    if (!outsideClickListener) {
-        outsideClickListener = (event) => {
-            if (isOutsideClicked(event)) {
-                layoutState.overlayMenuActive = false;
-            }
-        };
-
-        document.addEventListener('click', outsideClickListener);
+  if (!outsideClickListener) {
+    outsideClickListener = (event) => {
+      if (isOutsideClicked(event)) {
+        layoutState.overlayMenuActive = false
+      }
     }
-};
+
+    document.addEventListener('click', outsideClickListener)
+  }
+}
 
 const unbindOutsideClickListener = () => {
-    if (outsideClickListener) {
-        document.removeEventListener('click', outsideClickListener);
-        outsideClickListener = null;
-    }
-};
+  if (outsideClickListener) {
+    document.removeEventListener('click', outsideClickListener)
+    outsideClickListener = null
+  }
+}
 
 const isOutsideClicked = (event) => {
-    const topbarButtonEl = document.querySelector('.layout-menu-button');
+  const topbarButtonEl = document.querySelector('.layout-menu-button')
+  const el = sidebarRef.value
+  if (!el) return true
 
-    return !(sidebarRef.value.isSameNode(event.target) || sidebarRef.value.contains(event.target) || topbarButtonEl?.isSameNode(event.target) || topbarButtonEl?.contains(event.target));
-};
+  return !(
+    el.isSameNode(event.target) ||
+    el.contains(event.target) ||
+    topbarButtonEl?.isSameNode(event.target) ||
+    topbarButtonEl?.contains(event.target)
+  )
+}
 
 onBeforeUnmount(() => {
-    unbindOutsideClickListener();
-});
+  unbindOutsideClickListener()
+})
 </script>
 
 <template>
-    <div ref="sidebarRef" class="layout-sidebar">
-        <AppMenu />
-    </div>
-</template>
+  <div ref="sidebarRef" class="layout-sidebar">
+    <AppMenu />
+  </div>
+</template>