MobileNavigation

O MobileNavigation é uma barra lateral que proporciona acesso rápido e fácil às principais seções da aplicação no ambiente mobile.

---

Quando usar:

• Quando for necessária uma navegação na versão mobile da aplicação;
• Quando for necessário facilitar o acesso a diferentes seções do aplicativo, garantindo que o usuário possa navegar facilmente entre as páginas sem se perder;
• Quando o espaço vertical for limitado, aproveitando ao máximo a largura da tela do dispositivo móvel.

Quando não usar:

• Quando em ambiente desktop, onde uma barra de navegação superior ou lateral pode ser mais adequada;
• Quando em telas que requerem espaço horizontal significativo, pois o menu pode sobrepor ou obstruir o conteúdo principal.

---

Uso

<CdsMobileNavigation
	:items
	:light="true"
	:sticky="false"
	:activeItem="items[1]"
	:user
	:sidebar-logo="args.light
		? 'https://framerusercontent.com/images/9r26Llo7eNrs3keUxCNEGc8ttYE.png'
		: 'https://framerusercontent.com/images/oZRv3aHh1IPreheg1xQCkBQjQ.png'
	"
/>

---

Preview

Vigilância sanitária

JM

Joana Mendes

Administradora

---

Props

Nome	Tipo	Default	Opções	Descrição
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes implementadas: 'green', 'teal', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'. A variante só terá efeito quando a SideBar estiver no modo light.
light	boolean	false	--	Ativa o modo light da navegação.
sidebarLogo	string	''	--	Define a logo que vai aparecer na barra lateral da navegação
items	array	[]	--	Define a lista dos itens da navegação a serem mostrados. Os itens da lista devem ser objetos com path ou route, e com uma label.
activeItem	object	() => {}	--	O item ativo da navegação.
user	object	() => {}	--	Define as informações referentes ao usuário. O objeto deve seguir a assinatura: { name: String, role: String, picture: String }
sticky	boolean	false	--	Define se o componente estará no modo sticky

Eventos

Nome	Descrição
@logout	Evento emitido quando o botão de logout é clicado
@item-click	Evento emitido quando um dos itens da navegação é clicado
@profile-click	Evento emitido quando o clique é feito nas informações do usuário

Slots

Nome	Descrição
#sidebar-logo	Slot para renderização do logo da sidebar.