| Resumo | Torna o ícone de alternância da barra lateral dinâmico e personalizável | |
| Repositório | https://github.com/Lillinator/dynamic-sidebar-icon | |
| Visualização | https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon | |
| Guia de Instalação | Como instalar um tema ou componente de tema |
Instale este componente de tema
Visão Geral
Um componente de tema Discourse leve que altera dinamicamente o ícone de alternância da barra lateral no cabeçalho, dependendo se a barra lateral está aberta ou fechada.
Por padrão, o componente exibe o ícone padrão de menu hambúrguer (bars) quando a barra lateral está fechada e faz a transição para um ícone de fechar X (xmark) quando a barra lateral está aberta.
Administradores podem especificar ícones personalizados, caso desejem, e também optar por habilitá-lo para a visualização móvel (enquanto o aspecto dinâmico do componente se aplica apenas a tamanhos de viewport não móveis, administradores que alterarem o ícone de abertura podem desejar consistência com a experiência do usuário móvel).
Recursos
- Fornece aos usuários um feedback visual claro sobre como interagir com a barra lateral.
- Os administradores podem substituir facilmente os ícones padrão por qualquer ícone do FontAwesome por meio das configurações do tema.
- Permite habilitar um ícone de barra lateral substituído para consistência de UX em viewport móvel.
Capturas de Vídeo
Padrões do componente:
Usando os ícones dog e cat:
Configurações
Personalize os ícones usados para abrir e fechar a barra lateral editando as configurações do componente:
| setting | description |
|---|---|
Icon_to_open_the_sidebar |
o ícone exibido quando a barra lateral está recolhida (padrão: bars) |
Icon_to_close_the_sidebar |
o ícone exibido quando a barra lateral está expandida (padrão: xmark) |
Apply_open_icon_on_mobile |
aplica o ícone personalizado de ‘abertura’ em viewport móvel (padrão: false) |
Observações
- Se estiver usando ícones personalizados que não estão incluídos no Discourse principal, eles aparecerão em branco; para corrigir isso, você deve adicionar os ícones personalizados (por exemplo,
rocket,cat) à configuração do siteSVG icon subsetnas configurações de administrador do seu Discourse (vejaAll Site Settings→SVG icon subset). - Este componente não funciona com o modo de menu suspenso do cabeçalho.
Confira meus outros recursos do Discourse
