Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MelissaPerfil mobile: drawer "Menu Perfil" ganha o menu de configs no topo

Browse Source 
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>
This commit is contained in:
Leonardo
2026-05-06 18:07:25 -03:00
parent d1dced242f
commit 27b5bbed6f
2 changed files with 143 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaLayout.vue
+8 -1
View File
@@ -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 {
src/layout/melissa/MelissaPerfil.vue
+135 -58
View File
@@ -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). */