+ Menu Hover no Layout Rail, Twilio, Sms, Email, Templates, LNovo Layout Configurações

src/layout/AppRail.vue

@@ -25,7 +25,41 @@ import { sessionUser } from '@/app/session';
 import AppMenuFooterPanel from './AppMenuFooterPanel.vue';
 
 const menuStore = useMenuStore();
-const { layoutState } = useLayout();
+const { layoutState, layoutConfig, clearRailHoverClose, scheduleRailHoverClose } = useLayout();
+
+// ── Hover com delay ──────────────────────────────────────────
+let _hoverOpenTimer = null;
+
+function onRailMouseLeave() {
+    if (layoutConfig.railOpenMode !== 'hover') return;
+    clearTimeout(_hoverOpenTimer);
+    scheduleRailHoverClose(200);
+}
+
+function onRailMouseEnter() {
+    if (layoutConfig.railOpenMode !== 'hover') return;
+    clearRailHoverClose();
+}
+
+function onSectionHover(section) {
+    if (layoutConfig.railOpenMode !== 'hover') return;
+    clearRailHoverClose();
+    clearTimeout(_hoverOpenTimer);
+    _hoverOpenTimer = setTimeout(() => {
+        layoutState.railSectionKey = section.key;
+        layoutState.railPanelOpen = true;
+    }, 120);
+}
+
+function onHomeHover() {
+    if (layoutConfig.railOpenMode !== 'hover') return;
+    clearRailHoverClose();
+    clearTimeout(_hoverOpenTimer);
+    _hoverOpenTimer = setTimeout(() => {
+        layoutState.railSectionKey = '__home__';
+        layoutState.railPanelOpen = true;
+    }, 120);
+}
 
 // ── Seções do rail (derivadas do model) ─────────────────────
 const railSections = computed(() => {
@@ -98,7 +132,7 @@ function toggleUserMenu(e) {
 </script>
 
 <template>
-    <aside class="rail w-[60px] shrink-0 h-screen flex flex-col items-center border-r border-[var(--surface-border)] bg-[var(--surface-card)] z-50 select-none">
+    <aside class="rail w-[60px] shrink-0 h-screen flex flex-col items-center border-r border-[var(--surface-border)] bg-[var(--surface-card)] z-50 select-none" @mouseenter="onRailMouseEnter" @mouseleave="onRailMouseLeave">
         <!-- ── Brand ──────────────────────────────────────────── -->
         <div class="w-full h-14 shrink-0 grid place-items-center border-b border-[var(--surface-border)]">
             <span class="text-[1.35rem] font-extrabold leading-none text-[var(--primary-color)] [text-shadow:0_0_20px_color-mix(in_srgb,var(--primary-color)_40%,transparent)]">Ψ</span>
@@ -113,6 +147,7 @@ function toggleUserMenu(e) {
                 v-tooltip.right="{ value: 'Início', showDelay: 0 }"
                 aria-label="Início"
                 @click="selectHome"
+                @mouseenter="onHomeHover"
             >
                 <i class="pi pi-fw pi-home" />
             </button>
@@ -125,6 +160,7 @@ function toggleUserMenu(e) {
                 v-tooltip.right="{ value: section.label, showDelay: 0 }"
                 :aria-label="section.label"
                 @click="selectSection(section)"
+                @mouseenter="onSectionHover(section)"
             >
                 <i :class="section.icon" />
             </button>