Direzione di scorrimento del menu Hamburger

Sviluppatore
1

Ciao a tutti, sto cercando di configurare (su dispositivi mobili) il pannello hamburger in modo che si apra scorrendo dal lato destro dello schermo, esattamente come è configurato il pannello del profilo. Vedo che esiste una regola left: 0 specifica per il pannello hamburger. Ho modificato il CSS ma non sono riuscito a replicare il comportamento di scorrimento verso sinistra del pannello del profilo. Non sembra esserci molto CSS specifico per il pannello hamburger, quindi non sono sicuro di cosa mi stia sfuggendo.

Apprezzerei qualsiasi consiglio o informazione su cosa potrei aver perso! Grazie a tutti.

2

Ciao Lukas, benvenuto su Meta :wave:

Non c’è molto CSS coinvolto in questo caso. L’animazione è gestita con CSS, ma i valori per l’offset sono impostati in JavaScript per gestire il caso in cui l’utente scorra o sposti la vista a destra o a sinistra per chiudere i menu.

Gran parte di questa logica si trova qui - si tratta di un solo metodo; ce ne sono altri coinvolti nello stesso file:

C’è anche una logica che gestisce il caso in cui l’utente faccia clic sullo sfondo scurito per chiudere i menu.

Per il menu utente:

Per il menu hamburger:

Modificare questi elementi per far sì che il menu hamburger si apra e si chiuda a destra richiederà due passaggi.

  1. Modifica il componente site-header utilizzando ModifyClass in modo che apra tutti i menu dal lato destro. Attualmente controlla una classe sul menu, quindi possiamo semplicemente sovrascriverla come segue:

    api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // Non vogliamo menu a sinistra, quindi restituiamo false
    return false;
  }
});

  2. Quando si chiude il menu, vogliamo anche che si chiuda verso il lato destro. Per l’evento di scorrimento/spostamento, questo è già gestito dallo snippet sopra. Ora dobbiamo correggere il caso in cui l’utente fa clic sullo sfondo scurito. Discourse decide questo in base alla presenza o meno di una lingua RTL. Per modificare questo comportamento, abbiamo bisogno di un metodo diverso dell’API dei plugin, dato che il pannello hamburger è un widget.

    Il metodo che useremo è reopenWidget, come segue:

    api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // Applica il codice dal core
    this._super(...arguments);

    // Quindi apporta la modifica per farlo chiudere verso destra
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});

Ora non ti resta che aggiungere alcune righe di CSS per sovrascrivere gli stili predefiniti di quel menu, come segue:

.hamburger-panel,
.user-menu {
  .menu-panel.slide-in {
    left: unset;
    right: 0;
  }
}

Mettiamo tutto insieme. Questo va inserito nella scheda mobile > header del tuo tema:

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // Non vogliamo menu a sinistra, quindi restituiamo false
    return false;
  }
});

api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // Applica il codice dal core
    this._super(...arguments);

    // Quindi apporta la modifica per farlo chiudere verso destra
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});
</script>

E questo va inserito nella scheda mobile > CSS:

.hamburger-panel,
.user-menu {
  .menu-panel.slide-in {
    left: unset;
    right: 0;
  }
}

Una volta salvato il tema e aggiornato la pagina, il menu hamburger si aprirà e si chiuderà sul lato destro su mobile, proprio come il menu utente.

3

Ora sì che si chiama dare una risposta completa. Ben fatto!

4

image
image500×372 19.1 KB

Incredibile! Grazie mille per la risposta dettagliata, Joe! Servizio clienti A+, sono impressionato e molto grato.