Layout 100%, Notificações, SetupWizard

src/layout/composables/layout.js

@@ -1,4 +1,4 @@
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref, onMounted, onBeforeUnmount } from 'vue'
 
 // ── resolve variant salvo no localStorage ───────────────────
 function _loadVariant () {
@@ -55,6 +55,14 @@ function syncDarkFromDomOnce () {
   } catch {}
 }
 
+// ── reactive mobile state (atualiza no resize) ───────────────
+const _isMobileRef = ref(typeof window !== 'undefined' ? window.innerWidth <= 1200 : false)
+
+if (typeof window !== 'undefined') {
+  const _onResize = () => { _isMobileRef.value = window.innerWidth <= 1200 }
+  window.addEventListener('resize', _onResize, { passive: true })
+}
+
 export function useLayout () {
   // ✅ garante coerência sempre que alguém usar useLayout()
   syncDarkFromDomOnce()
@@ -82,13 +90,13 @@ export function useLayout () {
   const isRailMobile = () => window.innerWidth <= 1200
 
   const toggleMenu = () => {
-    // No Rail, o botão hamburguer (≤1200px) controla a sidebar mobile
-    if (layoutConfig.variant === 'rail') {
+    // No Rail, em desktop, o botão hamburguer controla a sidebar mobile do rail
+    if (layoutConfig.variant === 'rail' && !_isMobileRef.value) {
       layoutState.mobileMenuActive = !layoutState.mobileMenuActive
       return
     }
 
-    // Layout clássico — comportamento original
+    // Layout clássico (ou mobile com qualquer variant) — comportamento original
     if (isDesktop()) {
       if (layoutConfig.menuMode === 'static') {
         layoutState.staticMenuInactive = !layoutState.staticMenuInactive
@@ -160,6 +168,13 @@ export function useLayout () {
   const isDarkTheme = computed(() => layoutConfig.darkTheme)
   const hasOpenOverlay = computed(() => layoutState.overlayMenuActive)
 
+  // ── Em mobile (≤ 1200px) sempre usa o layout clássico, ───────
+  // independente de layoutConfig.variant
+  const isMobile = computed(() => _isMobileRef.value)
+  const effectiveVariant = computed(() =>
+    _isMobileRef.value ? 'classic' : layoutConfig.variant
+  )
+
   return {
     layoutConfig,
     layoutState,
@@ -173,6 +188,8 @@ export function useLayout () {
     setVariant,
     isDesktop,
     isRailMobile,
+    isMobile,
+    effectiveVariant,
     hasOpenOverlay
   }
 }