Antes cada pagina nativa de config tinha seu proprio chrome 2-col, e
quando o usuario navegava entre Perfil/Plano/Negocio/Seguranca/Agenda
Config/Bloqueios/Agendador/Pagamento, perdia o contexto do menu.
Agora:
- Catalogo unico em composables/melissaConfigGrupos.js (MELISSA_CONFIG_
GRUPOS + isMelissaConfigSlug helper)
- MelissaConfigSidebar.vue componente standalone com accordion +
navegacao via router.push + destaque do item ativo
- MelissaLayout renderiza `<MelissaConfigSidebar>` em qualquer slug
que esteja em MELISSA_CONFIG_GRUPOS (computed showConfigSidebar)
- CSS var --m-config-aside-left no .win11-root: 296px quando sidebar
visivel, 6px caso contrario
- Todas as 9 paginas nativas (Perfil, Plano, AlterarPlano, Negocio,
Seguranca, Bloqueios, AgendaConfig, Agendador, Pagamento) +
MelissaConfiguracoes ajustam left do inset usando a var
Sidebar tem entrada animada (lift + slide) e usa o pattern do .mcfg-
accordion (head com icone primary + label + desc 2-linhas + badge;
items com hover/active color-mix primary 12-16%).
Proximo passo: limpar o aside redundante interno do MelissaConfiguracoes
+ ajustar MelissaSeguranca pra considerar o aside no min-width 1000.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Como a pagina e enxuta (so 1 form pequeno + sidebar com info), cabe
bem em tablet portrait. Reduzi o breakpoint mobile pra 768px e
adaptei a formula da largura:
- 768-1012px : full-width (right: 6px)
- 1012-2012px: width fixo 1000px
- >= 2012px : ~50% do viewport (right: 50%)
Formula: right = max(6px, min(50%, calc(100% - 1006px)))
JS _mqMobile tambem atualizado pra (max-width: 767px).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Antes era right: 50% fixo, o que dava ~512px em viewports 1024-1100
(cramped p/ um form de senha + sidebar 320px).
Agora right = min(50%, calc(100% - 1006px)):
- viewport < 2012: page fixa em 1000px (nao shrink)
- viewport >= 2012: page = 50% (sobra mais espaco no lado direito)
Mobile (<1024px) continua full-width via media query existente.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Troca a centralizacao (left: 25% + right: 25%) por alinhamento a
esquerda: left fica em 6px (do inset base) e right: 50% (push do
edge direito pro meio). Pagina passa a ocupar a metade esquerda
do viewport, encostada na borda esquerda.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em desktop a pagina ocupa apenas 50% da largura util (left: 25% +
right: 25%), centralizada. Como Seguranca so tem 1 form pequeno
(Trocar senha + sidebar de info), nao precisa de toda a largura
do viewport. Em mobile mantem 100% (override so na media query
>= 1024px).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em desktop o card .mse-w do main (Trocar senha) ganha:
- max-height: 100% (do .mse-main) — nao passa do viewport
- SEM min-height — altura natural por conteudo
- body com flex: 1 + min-height: 0 + overflow-y: auto pra scroll
interno quando o conteudo (3 inputs + barra de forca + match +
warning + 2 botoes) precisar de mais espaco que o disponivel.
Diferente da sidebar (que mantem min-h 300 pq pode haver pouca info).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Leonardo