MelissaMenu: categoria abre alinhada com a secao ativa

Antes o menu sempre abria em "Agenda e Pacientes" (CATEGORIAS[0]).
Agora resolve qual categoria contem o sub-item secaoAtiva e abre
direto nela: ex. estando em /melissa/financeiro-lancamentos, o menu
abre ja em "Financeiro". Sem secaoAtiva (resumo), mantem default
agenda-pacientes.

Watcher em props.secaoAtiva sincroniza o destaque se o user troca de
sessao com o menu aberto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:14:28 -03:00
parent 6495cefb7e
commit e344661d4d
+26 -3
View File
@@ -18,7 +18,7 @@
* - select(key) — sub-item clicado (parent decide navegação)
* - close — clique fora ou X
*/
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { sessionUser, sessionRole } from '@/app/session';
import { supabase } from '@/lib/supabase/client';
@@ -27,7 +27,7 @@ import { useLayout } from '@/layout/composables/layout';
import { useUserSettingsPersistence } from '@/composables/useUserSettingsPersistence';
import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';
defineProps({
const props = defineProps({
secaoAtiva: { type: String, default: null }
});
@@ -173,9 +173,32 @@ const CATEGORIAS = [
];
// ── Estado ──────────────────────────────────────────────────────
const selectedKey = ref(CATEGORIAS[0].key); // primeira categoria por default
// Resolve a categoria que contem o sub-item ativo. Se nenhum casa,
// volta pra primeira (agenda-pacientes) — comportamento default.
function categoryKeyFor(itemKey) {
if (!itemKey) return null;
for (const cat of CATEGORIAS) {
for (const group of cat.groups) {
if (group.items.some((it) => it.key === itemKey)) return cat.key;
}
}
return null;
}
const selectedKey = ref(categoryKeyFor(props.secaoAtiva) || CATEGORIAS[0].key);
const copiado = ref(false);
// Sincroniza o destaque com a sessao ativa — se o user troca de
// "Lancamentos" pra "Agenda" sem fechar o menu, o selecionado
// acompanha a sessao corrente.
watch(
() => props.secaoAtiva,
(val) => {
const cat = categoryKeyFor(val);
if (cat) selectedKey.value = cat;
}
);
// Drill-down mobile: false = lista de categorias, true = sub-itens da
// categoria escolhida. CSS controla visibilidade via translateX em <lg.
// Em desktop o flag é ignorado (ambas colunas sempre visíveis).