Ícone de barra lateral dinâmica

:information_source: Resumo Torna o ícone de alternância da barra lateral dinâmico e personalizável
:hammer_and_wrench: Repositório https://github.com/Lillinator/dynamic-sidebar-icon
:eyeglasses: Visualização https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon
:question: Guia de Instalação Como instalar um tema ou componente de tema

Instale este componente de tema

:woman_technologist:t2: 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).


:star: 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.

:movie_camera: Capturas de Vídeo

Padrões do componente:

Usando os ícones dog e cat:


:wrench: 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)

:warning: 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 site SVG icon subset nas configurações de administrador do seu Discourse (veja All Site SettingsSVG icon subset).
  • Este componente não funciona com o modo de menu suspenso do cabeçalho.

Confira meus outros recursos do Discourse
14 curtidas

Refatorei o componente e adicionei uma nova configuração booleana Aplicar ícone de abrir no mobile (o padrão está desativado). Isso permite que administradores que alteram o ícone de abrir do padrão bars escolham habilitá-lo no tamanho de visualização móvel para consistência de UX. A barra lateral de sobreposição móvel se comporta de forma diferente, então o ícone não muda quando a barra lateral é ativada em tamanhos de visualização pequenos. Atualizei a OP também.

5 curtidas