Custom Hamburger Menu Links

Das ist mir auch aufgefallen und es scheint, dass nur die externen Links nicht unter Mehr erscheinen.

3 „Gefällt mir“

Ich verwende interne Links in dieser Komponente. Ich habe zum Beispiel einen Link, der Benutzereinladungen öffnet: /my/invited/pending/

Wenn ich den Link aus der Seitenleiste öffne, erhalte ich: Oops! Diese Seite existiert nicht oder ist privat.

Der Link funktioniert, wenn er über die Adressleiste aufgerufen wird.

Wenn ich die vollständige URL (https://domain.com/my/invited/pending/) eingebe, wird die URL wie folgt geöffnet:
https://domain.com/https://domain.com/my/invited/pending/

2 „Gefällt mir“

Ja. Bekanntes Problem.

2 „Gefällt mir“

Hallo,
Das sollte funktionieren mit: Chat,/chat/browse/open :slightly_smiling_face:

2 „Gefällt mir“

Ja, ich weiß. Ich habe meinen Kommentar vielleicht etwas zu schnell gesendet. Nun, definitiv zu schnell, denn ich sollte sagen, dass man hier einen Pfad anstelle einer vollständigen URL verwenden muss.

Zusätzlicher Link für den Chat… nun, die neue Seitenleiste hat das Playground komplett verändert und sie wird nicht mehr benötigt.

2 „Gefällt mir“

Ich habe mir den Code der Seitenleiste von Discourse angesehen und @manuel Icon-Ergänzung.\n\nEs scheint, dass es derzeit nicht möglich ist, die benutzerdefinierten Links des Icons anzupassen, da die Dekorationsmethode des Hamburger-Menüs die Konstante prefixValue (die den Namen des Icons enthält) oder etwas Ähnliches nicht berücksichtigt.\n\nAußerdem scheint es mir, dass Hamburger-Menü-Dekorationen mit api.decorateWidget veraltet sein werden. Siehe:\nhttps://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534\n\nAuch die Tatsache, dass externe Links nicht mehr funktionieren, könnte daher rühren:\nhttps://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524\n\nDaher sollte es einige Änderungen im Kern geben, um dies zu ermöglichen.\n\n:warning: Meine Kenntnisse über die Funktionsweise von Discourse sind fast nicht vorhanden, daher könnte ich mich sehr irren.\n\nLiege ich mit meinen Erkenntnissen richtig?

3 „Gefällt mir“

Ich habe diese Theme-Komponente aus dem GitHub-Repository installiert. Ich verwende 3.0.0.beta15 auf meinem Discourse und obwohl ich sie anscheinend hinzugefügt habe, zeigt das Hamburger-Menü meinen Link nicht an… Irgendwelche Ideen?

1 „Gefällt mir“

Es könnte damit zusammenhängen:

Bis heute funktionieren externe Links immer noch nicht.
Und interne Links müssen mit einem relativen Pfad beginnen, nicht mit einem vollständigen Pfad.

3 „Gefällt mir“

Vielen Dank für diese nützliche Komponente. Ich muss ein paar wichtige interne Links hinzufügen, aber da das Hamburger-Menü jetzt in die Seitenleiste integriert ist, sind sie unter dem Menüpunkt Mehr nicht sehr gut sichtbar. Benutzer finden Dinge normalerweise schlecht, daher muss ich sie auf der obersten Ebene platzieren, idealerweise direkt nach Meine Beiträge. Gibt es CSS-Hacks, um dies zu erreichen?

2 „Gefällt mir“

Ich denke, darüber hinaus, was CSS leisten kann. Das Discourse-Team hat dies zwar auf seiner Roadmap, aber es geschieht nicht schnell (glaube ich):

6 „Gefällt mir“

Ich benutze:

<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"> Rechtliches </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>

Sie können das Ergebnis unter https://forum.courservio.de/ sehen
Die originale Version dieses Codes stammt von https://meta.discourse.org/t/add-custom-links-to-sidebar/246848. Vielleicht hilft sie Ihnen weiter.

6 „Gefällt mir“

@hosch Wow, sehr schön, genau das, wonach ich gesucht habe! Vielen Dank.

1 „Gefällt mir“

@hosch Könnte man es zufällig weiter nach oben verschieben? Ich hätte es gerne nach der Sektion Community oder sogar davor.


Bearbeiten: Sieht so aus, als wäre es mit einer Variante davon möglich:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot

.sidebar-sections {
  display: flex; /* Richten Sie ein Flex-Layout ein, damit Sie Dinge neu anordnen können */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

Ich frage mich, ob man es an die höchste Position verschieben kann?

1 „Gefällt mir“

Bei dieser Methode gibt es eine Besonderheit, dass das benutzerdefinierte div verschwindet, wenn die Sichtbarkeit der Seitenleiste umgeschaltet wird, z. B. wenn das Browserfenster schmal ist. Dies ist besonders problematisch für Tablets, die normalerweise die Desktop-Version von Discourse erhalten und auf das Hamburger-Menü klicken müssen, um die Seitenleiste anzuzeigen. Gibt es mögliche Workarounds? Danke!


Bearbeiten: Hier gelöst:

1 „Gefällt mir“

Danke @hosch und @Olivier_Lambert, dass ihr das gemacht habt.

Könntest du diesem Neuling bitte erklären, wo ich das einfügen soll? :pray:

1 „Gefällt mir“

Wie kann ich Elemente in einem Seitenleisten- / Hamburger-Menübereich neu anordnen?

Zum Beispiel möchte ich „Alle Kategorien“ über die Kategorien im Abschnitt „Kategorien“ stellen, das Gleiche mit „Alle Tags“.

Vielen Dank!

1 „Gefällt mir“

Sie wissen jetzt, wie man eine Komponente für CSS verwendet, oder? Fügen Sie das in den Kopfbereich ein.

Das können Sie im Moment nicht einfach. Noch nicht. Es ist noch nicht ganz fertig und ausgereift.

2 „Gefällt mir“

Ich habe das versucht, es gab mir einen Fehler bei der Verwendung eines Semikolons in der Nähe von src.

Versuchen wir es noch einmal. Danke

1 „Gefällt mir“

Das ist immer noch ein Problem, die nachfolgenden Lösungen haben das Problem nicht behoben.

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

Abseits des Themas:

Ich habe dieses komprimierte Seitenleisten-Styling schon einmal gesehen, kann es aber nirgends finden. Ist das eine Theme-Komponente?

1 „Gefällt mir“

Sie können dieses CSS verwenden:

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

:slight_smile:

8 „Gefällt mir“