NavbarDropdowns
Grupo de componentes da área de perfil na base do sidebar vertical. O orchestrator ProfileDropDown é o único usado externamente — instancia UserDropDown, ConnectedSwitch, NotificationDropDown, TrasferrerDropDown e UserDevicesDropDown (admin only) conforme o modo do sidebar (expandido ou reduzido).
ProfileDropDown — Sidebar Expandido
Layout horizontal: avatar (40px) + nome do usuário + ConnectedSwitch Online/Offline + ícones de sino e outros dropdowns. Fundo #f9f6f6, padding 20px 15px. Fixo na base do VerticalNavMenu.
Online
Offline
<profile-drop-down
:verticalNavMenuItemsMin="verticalNavMenuItemsMin"
:userStatus="userStatus"
@mouseEnter="profileMouseEnter"
@updateUserStatus="updateUserStatus"
/>ProfileDropDown — Sidebar Reduzido
Quando verticalNavMenuItemsMin=true, o layout muda para coluna vertical de ícones empilhados. ConnectedSwitch usa vs-switch menor (16px) em vez do SwitchPedBot customizado.
<!-- Código interno do ProfileDropDown.vue — modo reduzido -->
<div class="the-navbar__user-meta" v-if="verticalNavMenuItemsMin">
<connected-switch
:verticalNavMenuItemsMin="verticalNavMenuItemsMin"
:userStatus="userStatus"
@updateUserStatus="updateUserStatus"
/>
<trasferrer-drop-down :verticalNavMenuItemsMin="verticalNavMenuItemsMin"/>
<notification-drop-down :verticalNavMenuItemsMin="verticalNavMenuItemsMin"/>
<user-devices-drop-down
v-if="activeUserInfo.role && activeUserInfo.role.name === 'administrador'"
:verticalNavMenuItemsMin="verticalNavMenuItemsMin"
/>
<user-drop-down :verticalNavMenuItemsMin="verticalNavMenuItemsMin"/>
</div>UserDropDown — Menu do Avatar
Dropdown do avatar com "Configurações" (oculto quando twoFactorActivated=true) e "Logout". Escuta evento logout no event bus para logout centralizado.
Normal
2FA ativo (Configurações oculto)
NotificationDropDown — Sino de Notificações
BellIcon com badge numérico (max "9+"). Dropdown com header azul primário, lista scrollável (min-width 300px, max-width 365px) de notificações não-lidas. Clique em item abre vs-popup de detalhe com "Marcar Como Lida".
Com notificações
Sem notificações
API
<!-- ProfileDropDown — único componente usado externamente. -->
<!-- Sub-componentes NUNCA são usados diretamente fora do ProfileDropDown. -->
<profile-drop-down
:verticalNavMenuItemsMin="verticalNavMenuItemsMin"
:userStatus="userStatus"
@mouseEnter="profileMouseEnter"
@updateUserStatus="updateUserStatus"
/>Props — ProfileDropDown
| Nome | Tipo | Obrig. | Descrição |
|---|---|---|---|
verticalNavMenuItemsMin | Boolean | Sim | Modo reduzido (icons-only) do sidebar. Altera layout horizontal→vertical e tamanhos dos ícones. |
userStatus | Boolean | Sim | Status online (true) / offline (false) do usuário logado. |
Eventos — ProfileDropDown
| Evento | Payload | Descrição |
|---|---|---|
@mouseEnter | — | Hover na área de perfil — usado pelo VerticalNavMenu para expandir temporariamente o sidebar em modo reduzido. |
@updateUserStatus | Boolean | Relay do ConnectedSwitch — novo status online/offline confirmado via API. |
Sub-componentes
| Componente | Prop chave | Descrição |
|---|---|---|
UserDropDown | verticalNavMenuItemsMin | Avatar circular + dropdown Configurações / Logout. Item Configurações oculto com 2FA ativo. |
ConnectedSwitch | verticalNavMenuItemsMin, userStatus | Toggle Online/Offline. SwitchPedBot (expandido) ou vs-switch 16px (reduzido). Debounce 500ms + disabled 3s após mudança. |
NotificationDropDown | verticalNavMenuItemsMin | Sino com badge numérico (max "9+"). Lista scrollável via VuePerfectScrollbar. Popup de detalhe ao clicar. |
TrasferrerDropDown | verticalNavMenuItemsMin | Dropdown de transferência de atendimentos. |
UserDevicesDropDown | verticalNavMenuItemsMin | Dispositivos do usuário — visível apenas para role.name === 'administrador'. |
Dependências
vs-dropdown, vs-dropdown-menu, vs-switch, vs-divider, vs-popup, vs-button
feather-icon, SwitchPedBot (ConnectedSwitch em modo expandido)
vue-perfect-scrollbar (NotificationDropDown)
AppActiveUser, userNotification.userNotifications, auth/logout, userNotification/read
user.connected(), user.disconnected() — status online/offline