Icono de barra lateral dinámica

:information_source: Resumen Hace que el icono de alternancia de la barra lateral sea dinámico y personalizable
:hammer_and_wrench: Repositorio https://github.com/Lillinator/dynamic-sidebar-icon
:eyeglasses: Vista previa https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon
:question: Guía de instalación Cómo instalar un tema o componente de tema

Instalar este componente de tema

:woman_technologist:t2: Descripción general

Un componente de tema ligero para Discourse que cambia dinámicamente el icono de alternancia de la barra lateral del encabezado según si la barra lateral está abierta o cerrada.

Por defecto, el componente muestra el icono estándar de menú hamburguesa (bars) cuando la barra lateral está cerrada, y cambia a un icono de X para cerrar (xmark) cuando la barra lateral está abierta.

Los administradores pueden especificar iconos personalizados si lo desean, y también pueden optar por habilitarlo para la vista móvil (mientras que el aspecto dinámico del componente solo se aplica a tamaños de ventana de visualización no móviles, los administradores que cambien el icono de apertura pueden desear consistencia con la experiencia de usuario móvil).


:star: Características

  • Proporciona a los usuarios una retroalimentación visual clara sobre cómo interactuar con la barra lateral.
  • Los administradores pueden reemplazar fácilmente los iconos predeterminados por cualquier icono de FontAwesome a través de la configuración del tema.
  • Permite habilitar un icono de barra lateral reemplazado para la consistencia de la experiencia de usuario en la ventana de visualización móvil.

:movie_camera: Capturas de video

Valores predeterminados del componente:

Usando los iconos dog y cat:


:wrench: Configuración

Personalice los iconos utilizados para abrir y cerrar la barra lateral editando la configuración del componente:

ajuste descripción
Icon_to_open_the_sidebar el icono mostrado cuando la barra lateral está contraída
(predeterminado: bars)
Icon_to_close_the_sidebar el icono mostrado cuando la barra lateral está expandida
(predeterminado: xmark)
Apply_open_icon_on_mobile aplicar el icono de apertura personalizado en la ventana de visualización móvil
(predeterminado: false)

:warning: Notas

  • Si utiliza iconos personalizados que no están ya incluidos en el núcleo de Discourse, aparecerán en blanco; para solucionar esto, debe agregar los iconos personalizados (por ejemplo, rocket, cat) a la configuración del sitio Subconjunto de iconos SVG en la configuración de administración de su Discourse (ver Todas las configuraciones del sitioSubconjunto de iconos SVG).
  • Este componente no funciona con el modo desplegable del encabezado.

Consulte mi otro material de Discourse
14 Me gusta

He refactorizado el componente y agregado una nueva configuración booleana Aplicar ícono de abrir en móviles (desactivada por defecto). Esto permite que los administradores que cambian el ícono de abrir del valor predeterminado bars puedan optar por habilitarlo en el tamaño de vista móvil para mantener la consistencia en la experiencia de usuario. La barra lateral superpuesta en móviles se comporta de manera diferente, por lo que el ícono no cambia cuando se activa la barra lateral en tamaños de vista pequeños. También he actualizado la publicación original.

5 Me gusta