Icona barra laterale dinamica di Discourse

:information_source: Riepilogo Rende l’icona di attivazione della barra laterale dinamica e personalizzabile
:hammer_and_wrench: Repository https://github.com/Lillinator/discourse-dynamic-sidebar-icon
:eyeglasses: Anteprima https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon
:question: Guida all’installazione Come installare un tema o un componente del tema

Installa questo componente del tema

:woman_technologist:t2: Panoramica

Un componente leggero per i temi di Discourse che modifica dinamicamente l’icona di attivazione della barra laterale nell’intestazione in base allo stato di apertura o chiusura della barra laterale.

Per impostazione predefinita, il componente visualizza l’icona standard del menu hamburger (bars) quando la barra laterale è chiusa e passa all’icona di chiusura a X (xmark) quando la barra laterale è aperta.

Gli amministratori possono specificare icone personalizzate se lo desiderano e scegliere anche di abilitarle per la visualizzazione mobile (mentre l’aspetto dinamico del componente si applica solo alle dimensioni della visualizzazione non mobile, gli amministratori che modificano l’icona di apertura potrebbero voler garantire coerenza con l’esperienza utente mobile).


:star: Caratteristiche

  • Fornisce agli utenti un chiaro feedback visivo su come interagire con la barra laterale.
  • Gli amministratori possono facilmente sostituire le icone predefinite con qualsiasi icona FontAwesome tramite le impostazioni del tema.
  • Consente di abilitare un’icona della barra laterale sostituita per garantire coerenza nell’esperienza utente mobile.

:movie_camera: Screenshot video

Impostazioni predefinite del componente:

Utilizzo delle icone dog e cat:


:wrench: Impostazioni

Personalizza le icone utilizzate per aprire e chiudere la barra laterale modificando le impostazioni del componente:

setting description
Icon_to_open_the_sidebar l’icona visualizzata quando la barra laterale è ridotta a icona
(predefinita: bars)
Icon_to_close_the_sidebar l’icona visualizzata quando la barra laterale è espansa
(predefinita: xmark)
Apply_open_icon_on_mobile applica l’icona di apertura personalizzata nella visualizzazione mobile
(predefinito: false)

:warning: Note

  • Se si utilizzano icone personalizzate non già incluse nel nucleo di Discourse, appariranno vuote; per risolvere il problema, è necessario aggiungere le icone personalizzate (ad esempio, rocket, cat) all’impostazione del sito SVG icon subset nelle impostazioni di amministrazione di Discourse (vedi All Site SettingsSVG icon subset).
  • Questo componente non funziona con la modalità a menu a tendina nell’intestazione.

Scopri il mio altro materiale Discourse
12 Mi Piace

Ho refattorizzato il componente e aggiunto una nuova impostazione booleana Applica icona aperta su mobile (predefinito: disabilitata). Questo permette agli amministratori che modificano l’icona aperta da quella predefinita bars di scegliere se abilitarla sulle dimensioni della visualizzazione mobile per garantire coerenza nell’esperienza utente. La barra laterale di sovrapposizione mobile si comporta in modo diverso, quindi l’icona non cambia quando la barra laterale viene attivata su visualizzazioni di piccole dimensioni. Ho aggiornato anche il primo post.

3 Mi Piace