⬇️ Intestazione a discesa

[kenjdarhan (Ken)]

Sì. Questo era il mio problema. Grazie per averlo fatto notare.

[afscstagiaire]

nell’svg icon subset aggiungi il nome dell’icona FontAwesome che stai cercando e poi nel menu dove aggiungi i pulsanti nell’intestazione usi la stessa sintassi. per l’icona utente devi solo scrivere “user”, ad esempio.

[Joe_Nguyen (Joe_007)]

Sono riuscito a far aprire i link in una nuova scheda con questo script. Basta aggiungere il seguente script alla sezione “Head”.

<script>
document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll(".custom-header-link.with-url");
    links.forEach(link => {
        link.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            const titles = {
                "Documentation": "Enter URL Here",
                "Downloads": "Enter URL Here",
                "Source Code": "Enter URL Here",
                "Dev Portal": "Enter URL Here",
                "Slack Channel": "Enter URL Here"
            };
            const url = titles[this.getAttribute("title")];
            if (url) {
                window.open(url, '_blank');
            }
        });
        link.setAttribute("href", "#");
    });
});
</script>

Spero che questo aiuti!

[Roi]

È possibile avere una visualizzazione diversa quando il titolo del sito è ridotto al minimo e viene mostrato il titolo dell’argomento corrente (scorrendo verso il basso un argomento)?

Ho notato che l’intestazione a discesa ha ancora un bell’aspetto e ha molto senso sugli schermi larghi, ma non sugli schermi piccoli. Quindi fare un display: none sarebbe utile ed è già stato fatto sul desktop quando max-width: 712px.

Grazie e molti saluti.

[martyn_thomas]

C’è un modo per mostrare solo l’intestazione a discesa su mobile?

Ho provato quanto segue:

/* Stili predefiniti - nascondi i pulsanti dell'intestazione */
.header-buttons {
  display: none;
  visibility: hidden;
}

/* Media query per dispositivi mobili */
@media screen and (max-width: 767px) {
  .header-buttons {
    display: inline; /* o display: inline-block; a seconda del tuo layout */
    visibility: visible;
  }
}

Il che funziona, ma qualsiasi altra cosa presente nell’intestazione (ad esempio GitHub - discourse/discourse-header-search) è ancora rimpicciolita come se l’intestazione a discesa fosse ancora lì…

Cosa mi sto perdendo?

Grazie

[Arkshine]

È probabile che la tua personalizzazione venga sovrascritta.
Non hai bisogno di visibility – puoi fare:

.header-buttons {
  display: none !important;
}

[dschwerin-teachforau (Danielle Schwerin)]

Domanda sull’utilizzo delle funzioni di sicurezza:

Se si utilizza questa funzione, è possibile avere più di un gruppo di sicurezza con accesso a un menu?

Il nostro esempio: gestiamo più programmi educativi (con più anni/gruppi di classi per ciascun programma), ogni gruppo di classi ha il proprio gruppo di sicurezza in modo da poter dare loro accesso alle giuste risorse educative (senza che accedano a risorse destinate a un altro programma/anno di classe), con ogni gruppo di anni che ha una Categoria unica per la loro classe.

Ho bisogno di creare menu per consentire a ciascuna classe di accedere alla propria categoria, ma ho anche bisogno di far entrare il nostro team educativo (non nel gruppo di sicurezza per gli studenti) in quegli spazi.

Al momento le uniche due soluzioni che vedo:

• creare un gruppo di sicurezza che combini il personale e ciascuna classe (fastidioso perché vorrei meno complicazioni sui gruppi di sicurezza, non di più)
• duplicare i menu, in modo che ce ne sia uno per il gruppo studenti e uno per il gruppo personale

Nessuna di queste sembra ottimale.

Prossima domanda: E per quanto riguarda l’aggiunta di funzionalità di sicurezza agli elementi del sottomenu?
(per il mio esempio: ciò significherebbe che potrei avere un menu per tutti i vari gruppi di corsi/classi, e poi mostrare agli studenti solo gli elementi del sottomenu applicabili. Mentre al momento ho circa 5-6 menu principali da gestire)

[nathank (Nathan Kershaw)]

Ti incoraggerei a cercare alternative a questo componente del tema, poiché non si adatta al tuo caso d’uso.

Posso suggerirti invece di inserire semplicemente le categorie di classi nell’impostazione del sito default_navigation_menu_categories?

Come amministratore, le vedrai tutte (anche se puoi personalizzare quella vista), ma i membri della tua classe e il personale vedranno solo quelle a cui hanno accesso nella barra laterale.

Se ho capito correttamente il tuo problema, questo funzionerebbe abbastanza bene per te.

[dschwerin-teachforau (Danielle Schwerin)]

Ciao Nathan,

Abbiamo impostato le nostre categorie. Ma vorremmo anche un menu in cima alla pagina. Gli utenti hanno familiarità con i menu in alto, e le community rappresentano già una curva di apprendimento abbastanza ripida (non siamo qui per creare un universo tecnologico completamente nuovo per i nostri studenti).

Inoltre, non funziona perché dobbiamo essere in grado di collegarci a siti esterni dal menu (in particolare ai nostri siti SharePoint, in uso perché Discourse non include una libreria strutturata), e le categorie semplicemente non lo fanno.

Onestamente, poter consentire a più gruppi di sicurezza di visualizzare un menu (nello stesso modo in cui consentiamo a più gruppi di sicurezza di accedere a una categoria) sarebbe semplicemente più facile. Ma se non è possibile, dovremo trovare qualcos’altro.

[sutterseba]

@merefield L’altezza dei pulsanti di accesso è influenzata dall’intestazione a discesa

Questo è un problema solo se “right” viene utilizzato per links position.

[merefield (Robert)]

Non lo mantengo più, quindi l’ho contrassegnato come unmaintained

Tuttavia, sentiti libero di inviare una PR e la esaminerò. Se non hai il tempo o le competenze ma desideri che qualcuno lo corregga e hai un budget, considera di pubblicare su Marketplace

[nathank (Nathan Kershaw)]

@sutterseba

L’altezza dei pulsanti di accesso è influenzata dall’intestazione a discesa

Anche a me sta causando un problema. Ho dato un’occhiata, ma purtroppo è troppo complesso per i miei hack CSS di base.

[Arkshine]

Ho creato una PR per modernizzare il componente. (sponsorizzato da @davidkingham)
Lungo il percorso, risolve alcuni problemi di UX che ho notato.

COMPATIBILITY: Modernize the component

Il componente potrebbe essere ulteriormente migliorato. Potrei fare un’altra PR in futuro. Eccone alcune che ho notato:

• Sostituire il tipo di impostazione json_schema con il tipo objects
• Aggiungere un’opzione per aprire un link in una nuova scheda
• Migliore accessibilità

[nathank (Nathan Kershaw)]

Grazie @Arkshine - lavoro eccellente!

[david (David Taylor)]

Sto riscontrando questo errore fatale su un sito che utilizza questo componente del tema :occhi:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
    at get source (custom-icon.gjs:20:24)
    ...

[Arkshine]

Oh. Ho aperto una PR per risolvere il problema; grazie per la segnalazione!

FIX: Error with undefined icon setting

---

Unito!

[BrianC (Brian)]

Ottimo componente e ottimo lavoro, grazie per i vostri sforzi e la vostra competenza! Ho notato che il menu a tendina supporta attualmente una voce di intestazione principale con un livello di sottovoci (ad esempio, Voce di intestazione → Link). È possibile aggiungere un altro livello, in modo che funzioni come: Voce di intestazione → Sottovoci → Link?

[kelv (Kelvin T)]

@angus Ho aperto una PR per aggiornare un nome di icona obsoleto di Font Awesome che ho notato:

DEV: update deprecated icon name from caret-square-down to square-caret-down

[angus (Angus McLeod)]

Grazie @kelv

[satonotdead]

Dovrebbe funzionare su Horizon o c’è qualcosa da cambiare?

Questo plugin è un must per le community che hanno un blog e/o altre app correlate.