Icona della barra laterale dinamica

[Lilly (Lillian)]

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

Installa questo componente tematico

Panoramica

Un componente tematico Discourse leggero che cambia dinamicamente l’icona di attivazione/disattivazione della barra laterale nell’intestazione in base a se la barra laterale è aperta o chiusa.

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

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

---

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 personalizzata della barra laterale per la coerenza dell’UX nella viewport mobile.

---

Screenshot video

Impostazioni predefinite del componente:

Utilizzando le icone dog e cat:

---

Impostazioni

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

impostazione	descrizione
Icon_to_open_the_sidebar	l’icona visualizzata quando la barra laterale è nascosta (predefinito: bars)
Icon_to_close_the_sidebar	l’icona visualizzata quando la barra laterale è espansa (predefinito: xmark)
Apply_open_icon_on_mobile	applica l’icona personalizzata di ‘apertura’ nella viewport mobile (predefinito: false)

---

Note

• Se si utilizzano icone personalizzate non già incluse nel core di Discourse, appariranno vuote; per risolvere questo problema, è necessario aggiungere le icone personalizzate (ad esempio, rocket, cat) all’impostazione del sito Sottoinsieme di icone SVG nelle impostazioni di amministrazione di Discourse (vedi Tutte le impostazioni del sito → Sottoinsieme di icone SVG).
• Questo componente non funziona con la modalità a tendina dell’intestazione.

---

Scopri le altre mie risorse per Discourse

[Lilly (Lillian)]

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.