Sidebar (navigation menu)

[annefranca]

Goal

Avaliar a viabilidade de incluir o componente de navegação de menu lateral na biblioteca Mística.

Context

Na estrutura da Vivo, um novo time passou a consumir a biblioteca Mística: o time de Backoffice. Com essa nova demanda, surgiu a necessidade de um componente padrão de navegação lateral que permita facilitar o acesso rápido e organizado em diferentes seções, páginas e/ou funcionalidades, com isso, melhorando a experiência de navegação do usuário.

Impact

Adicionar o componente de navegação lateral na biblioteca Mística traria um padrão de uso não apenas para a Vivo, mas também para outros times que poderiam se beneficiar desse mesmo componente. Dessa forma, garantiríamos consistência visual e funcional, assegurando a acessibilidade e o cumprimento de todos os demais padrões de boas práticas presentes nos componentes oficiais.

Discussion Questions

Notamos que, no arquivo Mística UI & Templates, existe um template de navegação lateral em uma das páginas. Gostaríamos de saber se há alguma previsão para a inclusão desse novo componente na biblioteca Mística. Se sim, vocês poderiam compartilhar com a gente?

https://www.figma.com/design/xsmY1nmS3pI3QBkhhJjnY7/%F0%9F%94%B9-M%C3%ADstica-UI---Template-Kit?m=auto&node-id=18899-140040&t=EX67r8Z44NKAdXyu-1

Additional considerations

No response

Do you have a visual proposal?

No response

[HectorSancho]

Hola Anne, ese tema ha estado dando muchas vueltas y lo hemos investigado intento darte contexto porque hemos llegado a un conclusión, que realmente eso no es un componente sino dos elementos juntos:

1.El primero, un side panel, esa parte está explorada en esta discussions de Alex: #740

Si no me equivoco, hoy podríais construir algo así con Mística con un grid custom, definiendo un área lateral con un ancho fijo y un grid custom con columnas en la derecha.

2.Luego, faltaría la otra pieza para tener esa barra lateral de navegación, que es el list item que se encuentra en el actual menu
(adjunto imágenes) así es como está montado en los templates kits.

Si llevas la necesidad a Julio Braz, vemos como priorizarlo y llevarlo a cabo. Creo que sería algo más como evolución del componente list item menu, que en conjunto con un side panel formaría ese menú en una barra lateral.

Cualquier duda hablamos por aquí.

[andredelramo-hm]

Buenas! Desde el CMS tenemos la misma necesidad y el principal inconveniente que veo, son los segundos niveles de navegación, que en cms se usa bastante

[annefranca]

Obrigada, @HectorSancho!

Da maneira que é implementado atualmente teria o comportamento para "minimizar"?

Você tem o link da solução que você levantou aplicado no Playroom?

[annefranca]

@HectorSancho

Em conversa com o @yceballost, ele compartilhou comigo este Playroom mostrando como é implementado atualmente. No entanto, acredito que este não seja o cenário mais adequado, considerando que também é uma necessidade de outros times, como comentou a @andredelramo-hm. Dessa forma, não seria mais adequado incluir essa demanda no backlog de Mística para que todos os times pudessem consumir o mesmo menu de navegação lateral de maneira consistente, utilizando as variáveis definidas dentro do padrão do sistema de design.

[annefranca]

@HectorSancho @yceballost

Vocês acham que podemos seguir com esse componente Extended?

[yceballost]

Yo diría que actualmente sería el camino más óptimo. Nuestra idea no era meter tanto un componente sidebar como tal sino un layout que permita sidebar. Pero es algo que tenemos que dejar más claro.

Si más adelante podemos aprovechar vuestra definición de sidebar para incluirla en Mística sería genial :)