Hallo zusammen, ich versuche, das Hamburger-Menü auf mobilen Geräten so einzustellen, dass es von der rechten Seite des Bildschirms herausgleitet – exakt wie das Profil-Menü konfiguriert ist. Ich sehe, dass es eine Regel left: 0 gibt, die speziell für das Hamburger-Menü existiert. Ich habe bereits am CSS herumgespielt, konnte aber das Nach-links-Gleiten des Profil-Menüs nicht nachbilden. Es scheint nicht allzu viel CSS zu geben, das speziell für das Hamburger-Menü gilt, daher bin ich mir nicht sicher, was ich übersehe.
Ich wäre für jeden Tipp oder Hinweis dankbar, was ich hier übersehen habe! Vielen Dank an alle.
Es ist nicht viel CSS im Spiel. Die Animation wird per CSS gesteuert, aber die Werte für den Versatz werden in JavaScript festgelegt, um den Fall zu behandeln, dass der Nutzer nach rechts oder links scrollt/wischt, um die Menüs zu schließen.
Der Großteil dieser Logik befindet sich hier – das ist nur eine Methode; es gibt noch ein paar weitere in dieser Datei:
Es gibt auch Logik, die den Fall behandelt, wenn der Nutzer auf den abgedunkelten Hintergrund klickt, um die Menüs zu schließen.
Für das Benutzermenü:
Für das Hamburger-Menü:
Die Änderung, damit sich das Hamburger-Menü rechts öffnet und schließt, umfasst zwei Schritte.
Ändere die site-header-Komponente mit ModifyClass, sodass alle Menüs von der rechten Seite aus geöffnet werden. Derzeit prüft es auf eine Klasse im Menü, also überschreiben wir das einfach wie folgt:
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// Wir wollen keine linken Menüs, also false zurückgeben
return false;
}
});
Beim Schließen des Menüs soll es ebenfalls zur rechten Seite hin schließen. Für das Scroll-/Wisch-Event wird dies bereits durch das obige Snippet behandelt. Jetzt müssen wir den Fall beheben, bei dem der Nutzer auf den abgedunkelten Hintergrund klickt. Discourse entscheidet dies basierend darauf, ob die Seite eine RTL-Sprache verwendet. Um dies zu ändern, benötigen wir eine andere plugin-api-Methode, da das Hamburger-Panel ein Widget ist.
Die Methode, die wir verwenden werden, ist reopenWidget wie folgt:
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// Den Code aus dem Core anwenden
this._super(...arguments);
// Dann deine Änderung vornehmen, damit es zur rechten Seite hin schließt
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
Dann musst du nur noch ein paar Zeilen CSS hinzufügen, um die Standardstile für dieses Menü wie folgt zu überschreiben:
Jetzt fassen wir alles zusammen. Dies gehört in den Reiter mobile > header deines Themes:
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// Wir wollen keine linken Menüs, also false zurückgeben
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// Den Code aus dem Core anwenden
this._super(...arguments);
// Dann deine Änderung vornehmen, damit es zur rechten Seite hin schließt
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
Sobald du das Theme gespeichert und die Seite aktualisiert hast, wird sich das Hamburger-Menü auf Mobilgeräten rechts öffnen und schließen – genau wie das Benutzermenü.
