From 27b5bbed6f21ecca1609458169b7ec289af494ee Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 18:07:25 -0300
Subject: [PATCH] MelissaPerfil mobile: drawer "Menu Perfil" ganha o menu de
 configs no topo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refator (entendi corretamente agora): o drawer da pagina deve
PERSISTIR em mobile (botao "Menu Perfil" abre um slide-in da
esquerda com a info contextual). O que muda e que dentro do drawer,
no topo, tambem aparece o MENU GLOBAL DE CONFIGURACOES — em vez
de ficar fixado na lateral em desktop e desaparecer em mobile.

MelissaLayout:
- @media (max-width: 1023px) esconde .melissa-config-aside-host
- Reseta --m-config-aside-left pra 6px em mobile (pagina vira full-width)

MelissaPerfil:
- Restaura o drawer slide-in (drawerOpen + toggle/fechar)
- Restaura botao "Menu Perfil" no header mobile
- Drawer scroll wrapper agora tem dois filhos:
  1. .mpr-mobile-drawer__configs com `<MelissaConfigSidebar>`
  2. .mpr-mobile-drawer__contextual com Teleport target da
     sidebar contextual (Sua evolucao + Avatar + Sair)
- Removido o trecho de menu inline no body (que era o approach errado)

Em desktop nada muda — a sidebar global do MelissaLayout continua
fixa na esquerda (296px de left no inset das paginas).

Pendente: aplicar o mesmo pattern (Teleport do MelissaConfigSidebar
pro drawer da pagina, acima do contextual) nas outras 8 paginas.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layout/melissa/MelissaLayout.vue |   9 +-
 src/layout/melissa/MelissaPerfil.vue | 193 +++++++++++++++++++--------
 2 files changed, 143 insertions(+), 59 deletions(-)

diff --git a/src/layout/melissa/MelissaLayout.vue b/src/layout/melissa/MelissaLayout.vue
index 6c5ebf0..4e5af99 100644
--- a/src/layout/melissa/MelissaLayout.vue
+++ b/src/layout/melissa/MelissaLayout.vue
@@ -2474,7 +2474,9 @@ function onKeydown(e) {
    Renderizado em qualquer rota de config (qualquer slug em
    MELISSA_CONFIG_GRUPOS). Fica na lateral esquerda; as paginas
    nativas usam var(--m-config-aside-left) no left do inset pra
-   abrir espaco automatico. */
+   abrir espaco automatico.
+   Em mobile (<1024px) some — o menu eh teleportado pro drawer
+   "Menu <secao>" de cada pagina (acima dos cards contextuais). */
 .melissa-config-aside-host {
     position: absolute;
     top: 6px;
@@ -2489,6 +2491,11 @@ function onKeydown(e) {
     from { opacity: 0; transform: translateX(-8px); }
     to   { opacity: 1; transform: translateX(0); }
 }
+@media (max-width: 1023px) {
+    .melissa-config-aside-host { display: none; }
+    /* Reseta a var pra paginas nao deixarem espaco vazio na esquerda */
+    .win11-root { --m-config-aside-left: 6px !important; }
+}
 
 /* ─── Plano de trás (resumo) ───────────────────────────────── */
 .win11-summary {
diff --git a/src/layout/melissa/MelissaPerfil.vue b/src/layout/melissa/MelissaPerfil.vue
index 79e4958..8837eef 100644
--- a/src/layout/melissa/MelissaPerfil.vue
+++ b/src/layout/melissa/MelissaPerfil.vue
@@ -33,11 +33,16 @@ const tenantStore = useTenantStore();
 
 const AVATAR_BUCKET = 'avatars';
 
-// ── Breakpoints (sem drawer — em mobile o menu de configs renderiza
-//   inline no topo via MelissaConfigSidebar). ─────────────────
+// ── Breakpoints + drawer ───────────────────────────────────
+const drawerOpen = ref(false);
 const isMobile = ref(false);
 let _mqMobile = null;
-function _onMqMobileChange(e) { isMobile.value = e.matches; }
+function _onMqMobileChange(e) {
+    isMobile.value = e.matches;
+    if (!e.matches) drawerOpen.value = false;
+}
+function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
+function fecharDrawer() { drawerOpen.value = false; }
 
 // ── Estado ─────────────────────────────────────────────────
 const loading = ref(true);
@@ -460,8 +465,41 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+    <!-- Drawer mobile: menu global de configs no topo + sidebar
+         contextual da pagina (Sua evolucao + Avatar) abaixo via
+         Teleport target. -->
+    <Transition name="mpr-drawer-fade">
+        <div
+            v-show="isMobile && drawerOpen"
+            class="mpr-mobile-drawer"
+            :class="{ 'is-open': drawerOpen }"
+        >
+            <div class="mpr-mobile-drawer__scroll">
+                <div class="mpr-mobile-drawer__configs">
+                    <MelissaConfigSidebar />
+                </div>
+                <div id="mpr-mobile-drawer-target" class="mpr-mobile-drawer__contextual" />
+            </div>
+        </div>
+    </Transition>
+    <Transition name="mpr-drawer-fade">
+        <div
+            v-show="isMobile && drawerOpen"
+            class="mpr-mobile-drawer__backdrop"
+            @click="fecharDrawer"
+        />
+    </Transition>
+
     <section class="mpr-page">
         <header class="mpr-page__head">
+            <button
+                class="mpr-menu-btn mpr-menu-btn--mobile-only"
+                v-tooltip.bottom="'Configurações & Evolução'"
+                @click="toggleDrawer"
+            >
+                <i class="pi pi-bars" />
+                <span>Menu Perfil</span>
+            </button>
             <div class="mpr-page__title">
                 <i class="pi pi-user mpr-page__title-icon" />
                 <span>Meu Perfil</span>
@@ -492,16 +530,10 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="mpr-body">
-            <!-- Menu global de configs SO em mobile, no topo do body
-                 (em desktop o MelissaLayout ja renderiza a sidebar
-                 fixada na esquerda fora do .mpr-page). -->
-            <div v-if="isMobile" class="mpr-mobile-config-menu">
-                <MelissaConfigSidebar />
-            </div>
-
-            <!-- ═══ COL 1: Sidebar (gamificação + avatar) — inline em
-                 desktop e mobile. Em mobile o .mpr-body e flex column,
-                 entao essa aside aparece acima do main. ═══ -->
+            <!-- ═══ COL 1: Sidebar (gamificação + avatar). Em desktop
+                 fica em col 1 inline. Em mobile e teleportada pro
+                 drawer "Menu Perfil" (abaixo do menu de configs). ═══ -->
+            <Teleport to="#mpr-mobile-drawer-target" :disabled="!isMobile">
                 <aside class="mpr-side">
                     <div class="mpr-side__scroll">
                         <!-- Card: Sua evolução -->
@@ -642,6 +674,7 @@ onBeforeUnmount(() => {
                         </button>
                     </div>
                 </aside>
+            </Teleport>
 
             <!-- ═══ COL 2: Main (form) ═══ -->
             <div class="mpr-main">
@@ -1471,66 +1504,110 @@ onBeforeUnmount(() => {
 .mpr-custom > .p-floatlabel,
 .mpr-custom > div { min-width: 0; }
 
-/* ═══════ Menu global de configs inline em mobile (topo do body)
-   — substitui o drawer antigo. Em desktop fica oculto pq o
-   MelissaLayout ja renderiza a sidebar global fixada na esquerda. */
-.mpr-mobile-config-menu {
-    display: none;
+/* ═══════ Mobile drawer — agora hospeda o MENU GLOBAL DE CONFIGS
+   no topo + a sidebar contextual (Sua evolucao + Avatar) abaixo via
+   Teleport target. Em desktop o drawer fica oculto e o
+   MelissaLayout renderiza o menu fixado na esquerda. */
+.mpr-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;
+}
+.mpr-mobile-drawer.is-open { transform: translateX(0); }
+.mpr-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;
+}
+.mpr-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
+.mpr-mobile-drawer__scroll::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+.mpr-mobile-drawer__configs {
+    flex-shrink: 0;
+}
+.mpr-mobile-drawer__configs :deep(.mcs-aside) {
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+}
+.mpr-mobile-drawer__configs :deep(.mcs-aside__body) {
+    max-height: none;
+    overflow: visible;
+}
+.mpr-mobile-drawer__contextual {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.mpr-mobile-drawer__contextual .mpr-side {
     width: 100%;
+    background: transparent;
+    border-right: none;
+    flex-shrink: 0;
+}
+.mpr-mobile-drawer__contextual .mpr-side__scroll {
+    padding: 0;
+    gap: 12px;
+    overflow: visible;
+}
+.mpr-mobile-drawer__contextual .mpr-side__footer {
+    padding: 0;
+    background: transparent;
+    border-top: none;
+}
+.mpr-mobile-drawer__contextual .mpr-w--side {
     flex-shrink: 0;
 }
 
+.mpr-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;
+}
+.mpr-drawer-fade-enter-active,
+.mpr-drawer-fade-leave-active { transition: opacity 200ms ease; }
+.mpr-drawer-fade-enter-from,
+.mpr-drawer-fade-leave-to { opacity: 0; }
+
 /* ═══════ Mobile (<1024px) ═══════ */
 @media (max-width: 1023px) {
-    /* Body vira flex column + scroll vertical externo. Tudo (menu
-       global, sidebar contextual, main) stack verticalmente. */
     .mpr-body {
         flex-direction: column;
         padding: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
     }
-    /* Menu global de configs no topo */
-    .mpr-mobile-config-menu {
-        display: block;
-        padding: 8px 8px 0;
-        flex: 0 0 auto;
-    }
-    .mpr-mobile-config-menu :deep(.mcs-aside) {
-        height: auto;
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    }
-    .mpr-mobile-config-menu :deep(.mcs-aside__body) {
-        max-height: none;
-        overflow: visible;
-    }
-    /* Sidebar contextual (Sua evolucao + Avatar) inline */
+    /* Sidebar contextual sai do flow (vai pro drawer via Teleport) */
     .mpr-side {
-        width: 100%;
-        flex: 0 0 auto;
-        background: transparent;
-        border-right: none;
-        padding: 8px 8px 0;
-    }
-    .mpr-side__scroll {
-        padding: 0;
-        gap: 8px;
-        overflow: visible;
-    }
-    .mpr-side__footer {
-        padding: 8px 0 0;
-        background: transparent;
-        border-top: none;
-    }
-    .mpr-w--side {
-        flex-shrink: 0;
+        display: none;
     }
     .mpr-main {
         width: 100%;
         padding: 8px;
-        overflow: visible;
-        flex: 0 0 auto;
     }
     /* Cards em mobile: altura natural por conteudo (sem stretch
        vertical do flex column do .mpr-main, sem clip por overflow). */