SideBar

SideBars são componentes utilizados para criar soluções de navegação e menus.

---

Recomendamos o uso de SideBars quando:

• For necessário separar o conteúdo por páginas e navergar por elas.
• Não for o caso de utilizar soluções como sideBar, sidebars, cards ou links como navegação.

Não recomendamos o uso de SideBars quando:

• Houver muitos itens a serem mostrados no menu.
• For necessário mostrar os links verticalmente.

Obs.:

• No objeto de configuração são aceitas as propriedades label, icon, type, route e items;
• O type pode ser assumir 3 valores:
  • route, para rotas internas (é renderizado um router-link com elas);
  • link para elementos que não devem redirecionar para nenhnuma rota;
  • external para links que devem ser abertos em uma nova guia;

---

Uso

<CdsSideBar
	variant="green"
	:items
	:activeItem="items[4]"
	userName="Joana Mendes"
	userRole="Administradora"
	userPicture="https://thispersondoesnotexist.com/"
	:collapsible="true"
	:collapsibleState="false"
	logoImage="https://framerusercontent.com/images/Xdjpf9nazmZOoS2SUnbbkwsaFk.png"
	:light="false"
	:searchButton="false"
	:show-logout="false"
	@sidebar-click="logClick"
	@search-button-click="logSearchButtonClick"
	@collapse-click="logCollapseClick"
	@logout="logLogout"
>
	<template #logo>
		<img
			v-if="!args.light"
			src="https://framerusercontent.com/images/Xdjpf9nazmZOoS2SUnbbkwsaFk.png"
		>
		<img
			v-else
			src="https://framerusercontent.com/images/cF8DHaPnyhgullDGcpLnyXwGUp4.png"
		>
	</template>
</CdsSideBar>

---

Preview

• Links
  Painel (Tv)

  Totem
• Configurações
• Suporte

Joana Mendes

Administradora

Mostrar log

⚡Nenhum evento foi disparado

---

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.
* items (required)	array	[]	--	Define a lista dos itens do SideBar a serem mostrados. Os itens da lista devem ser objetos com path ou route, e com uma label
* activeItem (required)	object	{}	--	O item ativo da SideBar
showLogout	boolean	true	--	Controla exibição do botão "sair" no footer da sidebar
showProfileMenu	boolean	false	--	Controla exibição do menu/dropdown ao clicar nas informações de perfil
profileMenuItems	array	[]	--	Controla os itens do menu/dropdown exibidos ao clicar nas informações de perfil
userName	string	''	--	Nome do usuário logado. Essa informação é colocada ao lado do Avatar
userRole	string	''	--	Perfil do usuário logado. Essa informação é colocada ao lado do Avatar
userPicture	string	null	--	Imagem do usuário logado. Informação é usada para montar o Avatar
collapsible	boolean	false	--	Permite que a sidebar seja colapsada em uma versão mínima
collapsibleState	boolean	null	--	Controla o estado da sidebar, se aberta ou colapsada.
logoImage	string	null	--	Imagem do logo que será renderizada
light	boolean	false	--	Ativa o modo light da sidebar
searchButton	boolean	false	--	Ativa o modo light da sidebar

Eventos

Nome	Descrição
@search-button-click
@logout
@sidebar-click
@collapse-click
@profile-menu-option-click
@logo-click

Slots

Nome	Descrição
#logo