From bbbb08ba9d5f8aad55787b43c5ff59839e703c95 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Thu, 21 May 2026 17:19:17 -0300
Subject: [PATCH] melissa/templates: drawer mobile com templates do sistema
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mobile (<1024px) agora segue padrao MelissaBloqueios:
- Coluna esquerda (Templates do sistema) eh teleportada pra um
  drawer fixed que abre via botao "Templates do sistema" no header.
- Botao .mdt-menu-btn--mobile-only substitui o titulo no mobile
  (mais legivel + acao clara).
- Backdrop escuro com blur fecha o drawer ao clicar fora.
- Auto-fecha quando o user seleciona um template (libera viewport
  pra ver o preview no main).

Script:
- drawerOpen + isMobile refs + matchMedia listener
- toggleDrawer/fecharDrawer helpers
- onMounted setup + onBeforeUnmount cleanup

Template:
- <Transition name="mdt-drawer-fade"> wrap (slide horizontal +
  fade do backdrop)
- <Teleport to="#mdt-mobile-drawer-target" :disabled="!isMobile">
  envolvendo a <aside class="mdt-side">
- Botao "Menu" no header com class mdt-menu-btn--mobile-only

CSS:
- .mdt-mobile-drawer fixed left, transform translateX, 250ms cubic
- .mdt-mobile-drawer__backdrop overlay com blur
- @media (max-width: 1023px): cols vira 1-col, sidebar inline some,
  botao menu aparece, titulo canonico some, acções viram icone-only

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../melissa/MelissaDocumentosTemplates.vue    | 151 +++++++++++++++++-
 1 file changed, 146 insertions(+), 5 deletions(-)

diff --git a/src/layout/melissa/MelissaDocumentosTemplates.vue b/src/layout/melissa/MelissaDocumentosTemplates.vue
index 245a09d..cb17b7a 100644
--- a/src/layout/melissa/MelissaDocumentosTemplates.vue
+++ b/src/layout/melissa/MelissaDocumentosTemplates.vue
@@ -9,7 +9,7 @@
  * Lógica idêntica à DocumentTemplatesPage (composable
  * useDocumentTemplates + DocumentTemplateEditor reusado).
  */
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 
@@ -67,6 +67,8 @@ function openEdit(tpl) {
 function openPreview(tpl) {
     previewTemplate.value = tpl;
     view.value = 'preview';
+    // No mobile, fecha o drawer pra dar espaço ao preview
+    if (isMobile.value) drawerOpen.value = false;
 }
 
 // Monta HTML completo do template (cabeçalho + corpo + rodapé) com
@@ -198,16 +200,68 @@ function getCardMenuItems(tpl) {
     return items;
 }
 
+// ── Mobile drawer (espelha padrão MelissaBloqueios) ─────
+const drawerOpen = ref(false);
+const isMobile = ref(false);
+let _mqMobile = null;
+function _onMqMobileChange(e) {
+    isMobile.value = e.matches;
+    if (!e.matches) drawerOpen.value = false;
+}
+function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
+function fecharDrawer() { drawerOpen.value = false; }
+
 onMounted(() => {
     fetchTemplates(true);
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        _mqMobile = window.matchMedia('(max-width: 1023px)');
+        isMobile.value = _mqMobile.matches;
+        try { _mqMobile.addEventListener('change', _onMqMobileChange); }
+        catch { _mqMobile.addListener(_onMqMobileChange); }
+    }
+});
+
+onBeforeUnmount(() => {
+    if (_mqMobile) {
+        try { _mqMobile.removeEventListener('change', _onMqMobileChange); }
+        catch { _mqMobile.removeListener(_onMqMobileChange); }
+    }
 });
 </script>
 
 <template>
+    <!-- Mobile drawer (templates do sistema) -->
+    <Transition name="mdt-drawer-fade">
+        <div
+            v-show="isMobile && drawerOpen"
+            class="mdt-mobile-drawer"
+            :class="{ 'is-open': drawerOpen }"
+        >
+            <div id="mdt-mobile-drawer-target" class="mdt-mobile-drawer__scroll" />
+        </div>
+    </Transition>
+    <Transition name="mdt-drawer-fade">
+        <div
+            v-show="isMobile && drawerOpen"
+            class="mdt-mobile-drawer__backdrop"
+            @click="fecharDrawer"
+        />
+    </Transition>
+
     <ConfirmDialog />
 
     <section class="mdt-page">
         <header class="mdt-page__head">
+            <!-- Botão "Menu" mobile-only (vira título no mobile, abre drawer com templates do sistema) -->
+            <button
+                v-if="view === 'list' || view === 'preview'"
+                class="mdt-menu-btn mdt-menu-btn--mobile-only"
+                v-tooltip.bottom="'Templates do sistema'"
+                @click="toggleDrawer"
+            >
+                <i class="pi pi-bars" />
+                <span>Templates do sistema</span>
+            </button>
             <div class="mdt-page__title">
                 <button
                     v-if="view !== 'list'"
@@ -301,7 +355,8 @@ onMounted(() => {
 
                 <!-- ══ Layout 2-col: sidebar (globais) + main (do tenant) ══ -->
                 <div v-else class="mdt-cols">
-                    <!-- ─── COL 1 — Sidebar: Templates do sistema ─── -->
+                    <!-- ─── COL 1 — Sidebar: Templates do sistema (teleporta pro drawer no mobile) ─── -->
+                    <Teleport to="#mdt-mobile-drawer-target" :disabled="!isMobile">
                     <aside class="mdt-side">
                         <header class="mdt-side__head">
                             <div class="mdt-side__title">
@@ -340,6 +395,7 @@ onMounted(() => {
                             </li>
                         </ul>
                     </aside>
+                    </Teleport>
 
                     <!-- ─── COL 2 — Main: Seus documentos OU Preview do sistema ─── -->
                     <main class="mdt-main">
@@ -1152,11 +1208,96 @@ onMounted(() => {
     color: var(--p-primary-color) !important;
 }
 
-/* Mobile (<1024px) */
+/* ═══════ Botão "Menu" mobile-only (abre drawer com templates do sistema) ═══════ */
+.mdt-menu-btn {
+    display: none;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    color: var(--m-text);
+    cursor: pointer;
+    font-size: 0.82rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+.mdt-menu-btn:hover { background: var(--m-bg-soft-hover); }
+
+/* ═══════ Mobile drawer (templates do sistema teleportados) ═══════ */
+.mdt-mobile-drawer {
+    position: fixed;
+    top: 0; left: 0;
+    height: 100vh;
+    height: 100dvh;
+    width: min(360px, 88vw);
+    z-index: 80;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+    border-right: 1px solid var(--m-border);
+    transform: translateX(-100%);
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--m-text);
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    display: flex;
+    flex-direction: column;
+}
+.mdt-mobile-drawer.is-open { transform: translateX(0); }
+.mdt-mobile-drawer__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mdt-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
+.mdt-mobile-drawer__scroll::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+/* No mobile a .mdt-side é teleportada pra dentro do drawer scroll */
+.mdt-mobile-drawer__scroll .mdt-side {
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--m-border);
+}
+
+.mdt-mobile-drawer__backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 79;
+}
+.mdt-drawer-fade-enter-active,
+.mdt-drawer-fade-leave-active { transition: opacity 200ms ease; }
+.mdt-drawer-fade-enter-from,
+.mdt-drawer-fade-leave-to { opacity: 0; }
+
+/* ═══════ Mobile (<1024px) — ajustes ═══════ */
 @media (max-width: 1023px) {
-    .mdt-page__title > span:nth-child(2):not(.mdt-page__count) {
-        font-size: 0.92rem;
+    /* Esconde a sidebar inline (templates do sistema viram drawer) */
+    .mdt-cols {
+        grid-template-columns: 1fr;
+        overflow: hidden;
     }
+    .mdt-cols > .mdt-side { display: none; }
+
+    /* Mostra botão Menu, esconde título canônico (vira sub-info) */
+    .mdt-menu-btn--mobile-only { display: inline-flex; }
+    .mdt-page__title > span:not(.mdt-page__count) { display: none; }
+    .mdt-page__title-icon { display: none; }
+    .mdt-page__count { display: none; }
+
+    /* Compacta botões de ação */
     .mdt-act-btn span { display: none; }
     .mdt-act-btn { width: 32px; padding: 0; justify-content: center; }
     .mdt-grid { grid-template-columns: 1fr; }