Custom Hamburger Menu Links

Ho notato anche questo e sembra che solo i link esterni non appaiano sotto Altro.

3 Mi Piace

Utilizzo collegamenti interni in questo componente, ad esempio, ho un collegamento che apre gli inviti utente: /my/invited/pending/

Quando apro il collegamento dalla barra laterale, ottengo: Oops! Quella pagina non esiste o è privata.

Il collegamento funziona quando vi si accede dalla barra degli URL.

Quando inserisco l’URL completo (https://domain.com/my/invited/pending/) l’URL si apre in questo modo:
https://domain.com/https://domain.com/my/invited/pending/

2 Mi Piace

Sì. Problema noto.

2 Mi Piace

Ciao,
Questo dovrebbe funzionare con: Chat,/chat/browse/open :slightly_smiling_face:

2 Mi Piace

Sì, lo so. Ho inviato il mio commento forse un po’ troppo velocemente. Beh, decisamente troppo velocemente, perché dovrei dire che lì si deve usare un percorso invece di un URL completo.

Link aggiuntivo per la chat… beh, la nuova barra laterale ha cambiato completamente il playground e non è più necessaria.

2 Mi Piace

Ho dato un’occhiata al codice della barra laterale di Discourse e @manuel aggiunta di icone.

Sembra che al momento non sia possibile personalizzare i link personalizzati dell’icona perché il metodo di decorazione del menu hamburger non tiene conto della costante prefixValue (che contiene il nome dell’icona) o qualcosa di simile…

Mi sembra anche che le decorazioni del menu hamburger con api.decorateWidget saranno deprecate. Vedi:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534

Inoltre, il fatto che i link esterni non funzionino più potrebbe derivare da questo:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524

Quindi dovrebbero esserci alcune modifiche al core per rendere disponibile questa funzionalità.

:warning: La mia conoscenza di come funziona Discourse è quasi inesistente, quindi potrei sbagliarmi di grosso.

Ho ragione nelle mie scoperte?

3 Mi Piace

Ho installato questo componente del tema dal repository di GitHub. Sto eseguendo la versione 3.0.0.beta15 sul mio discourse e, anche se sembra che l’abbia aggiunto, il menu hamburger non mostra il mio link… Qualche idea?

1 Mi Piace

Potrebbe essere correlato a:

Ancora oggi i link esterni non funzionano.
E i link interni devono iniziare con un percorso relativo, non con un percorso completo.

3 Mi Piace

Grazie mille per questo componente utile. Ho bisogno di aggiungere alcuni collegamenti interni importanti, ma ora che il menu hamburger è integrato nella barra laterale, mi accorgo che non sono molto visibili sotto il menu Altro. Gli utenti sono generalmente pessimi nel trovare le cose, quindi ho davvero bisogno di metterli al livello superiore, idealmente subito dopo I miei post. Ci sono degli hack CSS per raggiungere questo obiettivo?

2 Mi Piace

Oltre a ciò che il CSS può ottenere, penso di sì. Il team di Discourse ha questo nella sua roadmap, ma non sta accadendo rapidamente (penso):

6 Mi Piace

Io uso:

<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Legale </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // Create the links
    const links = [
      { title: "Impressum", src: "/impressum" },
      { title: "Datenschutz", src: "/privacy" },
    ]

    // Mobile
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Force to wait until navigation has been loaded
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // Get the customNav Id
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

Puoi vedere il risultato su https://forum.courservio.de/
La versione originale di questo codice proviene da https://meta.discourse.org/t/add-custom-links-to-sidebar/246848. Forse potrebbe esserti d’aiuto.

6 Mi Piace

@hosch Wow, molto bello, esattamente quello che stavo cercando! Grazie mille.

1 Mi Piace

@hosch Per caso è possibile spostarlo più in alto? Vorrei che apparisse dopo la sezione Community, o addirittura prima di essa.


Modifica: Sembra che sia possibile con una variazione su questo:\nRearrange Existing Hamburger Menu Items - #3 by awesomerobot

.sidebar-sections {
  display: flex; /* Imposta un layout flex in modo da poter riordinare le cose */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

Mi chiedo se sia possibile spostarlo nella posizione più alta?

1 Mi Piace

C’è una stranezza con questo metodo in cui il div personalizzato scompare quando si attiva/disattiva la visibilità della barra laterale, ad esempio se la finestra del browser è stretta. Questo è un problema soprattutto per i tablet, che di solito ottengono la versione desktop di Discourse e richiedono di fare clic sul menu hamburger per visualizzare la barra laterale. Ci sono possibili soluzioni? Grazie!


Modifica: Risolto qui:

1 Mi Piace

Grazie @hosch e @Olivier_Lambert per averlo realizzato.

Potresti spiegare a questo principiante dove dovrei inserirlo? :pray:

1 Mi Piace

Come posso riordinare gli elementi in una sezione della barra laterale / menu hamburger?

Ad esempio, voglio mettere “Tutte le categorie” sopra le categorie nella sezione “Categorie”, lo stesso con “Tutti i tag”.

Grazie!

1 Mi Piace

Sai ora come usare un componente per il CSS, vero? Aggiungilo nella sezione head.

Non puoi facilmente. Almeno per ora. Al momento non è completamente finito e rifinito.

2 Mi Piace

Ho provato questo, mi ha dato un errore sull’uso di un punto e virgola vicino a src.

Proviamo di nuovo. Grazie.

1 Mi Piace

Questa cosa persiste, le soluzioni successive non hanno risolto il problema.

Impostazione: Invite friends,/my/invited/pending/,f

Fuori tema:

Ho già visto questo stile di barra laterale condensata, ma non riesco a trovarlo da nessuna parte. È un componente del tema?

1 Mi Piace

Puoi usare questo CSS:

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

:slight_smile:

8 Mi Piace