Hola Lukas, bienvenido a Meta 
No hay mucho CSS involucrado en esto. La animación se maneja con CSS, pero los valores del desplazamiento se establecen en JavaScript para manejar el caso en que el usuario hace scroll o se desliza hacia la derecha o la izquierda para cerrar los menús.
La mayor parte de esa lógica está aquí; eso es solo un método; hay algunos otros involucrados en ese archivo:
discourse/app/assets/javascripts/discourse/app/components/site-header.js at 8a250a1eac9032485e7d367f93e6ac418014e2ff · discourse/discourse · GitHub
También hay cierta lógica que maneja el caso cuando el usuario hace clic en el fondo atenuado para cerrar los menús.
Para el menú de usuario:
discourse/app/assets/javascripts/discourse/app/widgets/user-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Para el menú hamburguesa:
discourse/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Cambiar esto para que el menú hamburguesa se abra y cierre por la derecha implicará dos cosas.
-
Modificar el componente site-header con ModifyClass para que abra todos los menús desde el lado derecho. Actualmente verifica una clase en el menú, por lo que simplemente lo sobrescribimos así:
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// no queremos ningún menú izquierdo, así que retornamos false
return false;
}
});
-
Al cerrar el menú, también queremos que se cierre hacia el lado derecho. Para el evento de desplazamiento/deslizamiento, esto ya está manejado por el fragmento anterior. Ahora necesitamos solucionar el caso en que el usuario hace clic en el fondo atenuado. Discourse decide esto basándose en si el sitio utiliza un idioma RTL o no. Para modificar esto, necesitamos un método diferente de plugin-api, ya que el panel hamburguesa es un widget.
El método que vamos a usar es reopenWidget así:
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// aplicar el código del núcleo
this._super(...arguments);
// luego hacer tu cambio para que se cierre hacia el lado derecho
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
Luego, todo lo que necesitas hacer es agregar unas pocas líneas de CSS para sobrescribir los estilos predeterminados de ese menú así:
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
Ahora, pongamos todo junto. Esto va en la pestaña mobile > header de tu tema:
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// no queremos ningún menú izquierdo, así que retornamos false
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// aplicar el código del núcleo
this._super(...arguments);
// luego hacer tu cambio para que se cierre hacia el lado derecho
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
Y esto va en la pestaña mobile > CSS:
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
Una vez que guardes el tema y actualices la página, el menú hamburguesa se abrirá y cerrará por el lado derecho en dispositivos móviles, al igual que el menú de usuario.
