Agenda, Agendador, Configurações

src/layout/AppLayout.vue

@@ -1,14 +1,24 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout'
-import { computed, onMounted, onBeforeUnmount, provide } from 'vue'
+import { computed, onMounted, onBeforeUnmount, provide, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import AppFooter    from './AppFooter.vue'
-import AppSidebar   from './AppSidebar.vue'
-import AppTopbar    from './AppTopbar.vue'
-import AppRail      from './AppRail.vue'
-import AppRailPanel    from './AppRailPanel.vue'
-import AppRailTopbar  from './AppRailTopbar.vue'
+import AppFooter     from './AppFooter.vue'
+import AppSidebar    from './AppSidebar.vue'
+import AppTopbar     from './AppTopbar.vue'
+import AppRail       from './AppRail.vue'
+import AppRailPanel  from './AppRailPanel.vue'
+import AppRailTopbar from './AppRailTopbar.vue'
+import AjudaDrawer   from '@/components/AjudaDrawer.vue'
+
+import { fetchDocsForPath, useAjuda } from '@/composables/useAjuda'
+
+const { drawerOpen } = useAjuda()
+
+const ajudaPushStyle = computed(() => ({
+  transition: 'padding-right 0.3s ease',
+  paddingRight: drawerOpen.value ? '420px' : '0'
+}))
 
 import { useTenantStore } from '@/stores/tenantStore'
 import { useEntitlementsStore } from '@/stores/entitlementsStore'
@@ -77,6 +87,9 @@ function onSessionRefreshed () {
   revalidateAfterSessionRefresh()
 }
 
+// Dispara busca de docs de ajuda sempre que a rota muda
+watch(() => route.path, (path) => fetchDocsForPath(path), { immediate: true })
+
 onMounted(() => {
   window.addEventListener('app:session-refreshed', onSessionRefreshed)
 })
@@ -95,12 +108,13 @@ onBeforeUnmount(() => {
         <AppRailTopbar />
         <div class="l2-content">
           <AppRailPanel />
-          <div class="l2-main">
+          <div class="l2-main" :style="ajudaPushStyle">
             <router-view />
           </div>
         </div>
       </div>
     </div>
+    <AjudaDrawer />
     <Toast />
   </template>
 
@@ -109,7 +123,7 @@ onBeforeUnmount(() => {
     <div class="layout-wrapper" :class="containerClass">
       <AppTopbar />
       <AppSidebar />
-      <div class="layout-main-container">
+      <div class="layout-main-container" :style="ajudaPushStyle">
         <div class="layout-main">
           <router-view />
         </div>
@@ -117,6 +131,7 @@ onBeforeUnmount(() => {
       </div>
       <div class="layout-mask animate-fadein" @click="hideMobileMenu" />
     </div>
+    <AjudaDrawer />
     <Toast />
   </template>
 </template>