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

MelissaMenu: hover/active primary nos itens do rodape

Browse Source 
Hover e is-active dos .mm-foot-item agora usam --p-primary-color (text +
icone + bg color-mix 12-16%). Trocado "Meus Planos" -> "Meu Plano"
(singular). Cada item ganha is-active baseado em props.secaoAtiva
(perfil/plano/negocio/seguranca), Modo escuro fica is-active quando
isDarkTheme = true, Cores do Tema mantem is-active baseado em
themeViewActive.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:24:53 -03:00
parent 684f673cc1
commit d8968d9aec
1 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaMenu.vue
+31 -10
View File
@@ -408,20 +408,37 @@ async function sair() {
<div class="mm-side__foot">
<!-- Itens grudados acima do usuário -->
<div class="mm-foot-actions">
<button class="mm-foot-item" @click="goPerfil">
<button
class="mm-foot-item"
:class="{ 'is-active': props.secaoAtiva === 'perfil' }"
@click="goPerfil"
>
<i class="pi pi-user" /><span>Meu Perfil</span>
</button>
<button class="mm-foot-item" @click="goPlano">
<i class="pi pi-credit-card" /><span>Meus Planos</span>
<button
class="mm-foot-item"
:class="{ 'is-active': props.secaoAtiva === 'plano' }"
@click="goPlano"
>
<i class="pi pi-credit-card" /><span>Meu Plano</span>
</button>
<button class="mm-foot-item" @click="goNegocio">
<button
class="mm-foot-item"
:class="{ 'is-active': props.secaoAtiva === 'negocio' }"
@click="goNegocio"
>
<i class="pi pi-briefcase" /><span>Meu Negócio</span>
</button>
<button class="mm-foot-item" @click="goSeguranca">
<button
class="mm-foot-item"
:class="{ 'is-active': props.secaoAtiva === 'seguranca' }"
@click="goSeguranca"
>
<i class="pi pi-shield" /><span>Segurança</span>
</button>
<button
class="mm-foot-item"
:class="{ 'is-active': isDarkTheme }"
:aria-pressed="isDarkTheme"
@click="toggleDarkAndPersist"
>
@@ -803,21 +820,25 @@ async function sair() {
transition: background-color 120ms ease, color 120ms ease;
}
.mm-foot-item:hover {
background: var(--m-bg-soft);
color: var(--m-text);
background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
color: var(--p-primary-color);
}
.mm-foot-item:hover > i {
color: var(--p-primary-color);
}
.mm-foot-item.is-active {
background: var(--m-bg-soft-hover);
color: var(--m-text);
background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
color: var(--p-primary-color);
}
.mm-foot-item.is-active > i {
color: var(--m-text);
color: var(--p-primary-color);
}
.mm-foot-item > i {
width: 14px;
text-align: center;
color: var(--m-text-muted);
font-size: 0.78rem;
transition: color 120ms ease;
}
.mm-foot-item > span {
flex: 1;