Salut à tous, j’essaie de configurer (sur les appareils mobiles) le panneau hamburger pour qu’il glisse depuis le côté droit de l’écran, exactement comme le panneau de profil. Je vois qu’il existe une règle left: 0 spécifique au panneau hamburger. J’ai fait des ajustements dans le CSS, mais je n’ai pas réussi à reproduire le comportement de glissement vers la gauche du panneau de profil. Il ne semble pas y avoir beaucoup de CSS spécifique au panneau hamburger, donc je ne suis pas tout à fait sûr de ce qui me manque.
Je serais reconnaissant pour tout conseil ou insight sur ce que je pourrais manquer ici ! Merci à tous.
Il n’y a pas beaucoup de CSS impliqué ici. L’animation est gérée par CSS, mais les valeurs de décalage sont définies en JavaScript pour gérer le cas où l’utilisateur fait défiler ou panote vers la droite ou la gauche pour fermer les menus.
La majeure partie de cette logique se trouve ici – ce n’est qu’une seule méthode ; il y en a quelques autres impliquées dans ce fichier :
Il y a aussi une logique qui gère le cas où l’utilisateur clique sur l’arrière-plan assombri pour fermer les menus.
Pour le menu utilisateur :
Pour le menu hamburger :
Modifier cela pour que le menu hamburger s’ouvre et se ferme sur la droite implique deux étapes.
Modifier le composant site-header avec ModifyClass afin qu’il ouvre tous les menus depuis le côté droit. Actuellement, il vérifie la présence d’une classe sur le menu, nous pouvons donc simplement le remplacer comme suit :
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// nous ne voulons aucun menu à gauche, donc retourner false
return false;
}
});
Lors de la fermeture du menu, nous voulons également qu’il se ferme vers la droite. Pour l’événement de défilement ou de panoramique, cela est déjà géré par l’extrait ci-dessus. Maintenant, nous devons corriger le cas où l’utilisateur clique sur l’arrière-plan assombri. Discourse décide cela en fonction de savoir si le site utilise une langue RTL ou non. Pour modifier cela, nous avons besoin d’une autre méthode de l’API des plugins, car le panneau hamburger est un widget.
La méthode que nous allons utiliser est reopenWidget, comme suit :
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// appliquer le code du noyau
this._super(...arguments);
// puis apporter votre modification pour qu'il se ferme vers la droite
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
Ensuite, tout ce qu’il vous reste à faire est d’ajouter quelques lignes de CSS pour remplacer les styles par défaut de ce menu, comme suit :
Maintenant, mettons tout cela ensemble. Cela va dans l’onglet mobile > header de votre thème :
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// nous ne voulons aucun menu à gauche, donc retourner false
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// appliquer le code du noyau
this._super(...arguments);
// puis apporter votre modification pour qu'il se ferme vers la droite
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
Une fois que vous aurez enregistré le thème et rafraîchi la page, le menu hamburger s’ouvrira et se fermera sur le côté droit sur mobile – tout comme le menu utilisateur.
