From d1dced242f26472368da57ff0f1dece89732da72 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 18:01:34 -0300
Subject: [PATCH] MelissaPerfil mobile: menu de configs inline no topo (sem
 drawer)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refator do menu mobile so no Perfil (validacao do padrao):
- Remove o drawer slide-in da esquerda + backdrop + botao "Menu"/
  "Configuracoes" no header
- Renderiza <MelissaConfigSidebar> INLINE no topo do .mpr-body em
  mobile (.mpr-mobile-config-menu)
- A sidebar contextual (Sua evolucao + Avatar) tambem renderiza
  inline em sequencia, abaixo do menu global
- O main com o form fica abaixo de tudo
- Body em mobile vira flex column + overflow-y: auto (scroll externo
  unico pra toda a pagina)

Drawer state (drawerOpen/toggle/fechar) e Teleport removidos do
JS+template. Em desktop nada muda — MelissaLayout segue renderizando
a sidebar global fixa na esquerda.

Pendente: aplicar o mesmo pattern nas outras 8 paginas de config se
o usuario validar este formato.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layout/melissa/MelissaPerfil.vue | 176 +++++++++------------------
 1 file changed, 59 insertions(+), 117 deletions(-)

diff --git a/src/layout/melissa/MelissaPerfil.vue b/src/layout/melissa/MelissaPerfil.vue
index e57e86a..79e4958 100644
--- a/src/layout/melissa/MelissaPerfil.vue
+++ b/src/layout/melissa/MelissaPerfil.vue
@@ -21,6 +21,7 @@ import { useConfirm } from 'primevue/useconfirm';
 import { useRouter } from 'vue-router';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
+import MelissaConfigSidebar from './MelissaConfigSidebar.vue';
 // InputText/Select/Textarea/InputMask/Skeleton/Tag/Button: auto via PrimeVueResolver
 
 const emit = defineEmits(['close']);
@@ -32,16 +33,11 @@ const tenantStore = useTenantStore();
 
 const AVATAR_BUCKET = 'avatars';
 
-// ── Breakpoints + drawer ───────────────────────────────────
-const drawerOpen = ref(false);
+// ── Breakpoints (sem drawer — em mobile o menu de configs renderiza
+//   inline no topo via MelissaConfigSidebar). ─────────────────
 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; }
+function _onMqMobileChange(e) { isMobile.value = e.matches; }
 
 // ── Estado ─────────────────────────────────────────────────
 const loading = ref(true);
@@ -420,10 +416,6 @@ const SECTION_BY_FIELD = {
 function scrollToSection(field) {
     const sec = SECTION_BY_FIELD[field];
     if (!sec) return;
-    // Avatar fica na sidebar; em mobile mantem o drawer aberto (e nao scrolla
-    // o main, pq a sessao nao existe no main).
-    const isAvatar = sec === 'avatar';
-    if (isMobile.value && !isAvatar) drawerOpen.value = false;
     nextTick(() => {
         const target = document.getElementById('mpr-sec-' + sec);
         if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -468,34 +460,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <!-- Backdrop + drawer mobile pra sidebar (Teleport target) -->
-    <Transition name="mpr-drawer-fade">
-        <div
-            v-show="isMobile && drawerOpen"
-            class="mpr-mobile-drawer"
-            :class="{ 'is-open': drawerOpen }"
-        >
-            <div id="mpr-mobile-drawer-target" class="mpr-mobile-drawer__scroll" />
-        </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="'Evolução & Avatar'"
-                @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>
@@ -526,8 +492,16 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="mpr-body">
-            <!-- ═══ COL 1: Sidebar (gamificação + avatar) ═══ -->
-            <Teleport to="#mpr-mobile-drawer-target" :disabled="!isMobile">
+            <!-- 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. ═══ -->
                 <aside class="mpr-side">
                     <div class="mpr-side__scroll">
                         <!-- Card: Sua evolução -->
@@ -668,7 +642,6 @@ onBeforeUnmount(() => {
                         </button>
                     </div>
                 </aside>
-            </Teleport>
 
             <!-- ═══ COL 2: Main (form) ═══ -->
             <div class="mpr-main">
@@ -1498,97 +1471,66 @@ onBeforeUnmount(() => {
 .mpr-custom > .p-floatlabel,
 .mpr-custom > div { min-width: 0; }
 
-/* ═══════ Mobile drawer (sidebar teleportada) ═══════ */
-.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: hidden;
-    display: flex;
-    flex-direction: column;
-}
-.mpr-mobile-drawer__scroll .mpr-side {
-    flex: 1;
-    min-height: 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;
     width: 100%;
-    overflow: hidden;
-    background: transparent;
-    border-right: none;
-    display: flex;
-    flex-direction: column;
-}
-.mpr-mobile-drawer__scroll .mpr-side__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 .mpr-side__scroll::-webkit-scrollbar { width: 5px; }
-.mpr-mobile-drawer__scroll .mpr-side__scroll::-webkit-scrollbar-thumb {
-    background: var(--m-border-strong);
-    border-radius: 3px;
-}
-.mpr-mobile-drawer__scroll .mpr-w--side {
-    margin: 0;
     flex-shrink: 0;
 }
-.mpr-mobile-drawer__scroll .mpr-side__footer {
-    flex-shrink: 0;
-    margin: 0;
-    padding: 12px;
-    background: var(--m-bg-medium);
-    border-top: 1px solid var(--m-border);
-}
-
-.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 */
     .mpr-side {
-        display: none;
+        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;
     }
     .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). */