Olá Lukas, bem-vindo ao Meta 
Não há muito CSS envolvido aqui. A animação é tratada com CSS, mas os valores do deslocamento são definidos em JavaScript para lidar com o caso em que o usuário rola ou desliza para a direita ou para a esquerda para fechar os menus.
A maior parte dessa lógica está aqui — isso é apenas um método; há alguns outros envolvidos naquele arquivo:
discourse/app/assets/javascripts/discourse/app/components/site-header.js at 8a250a1eac9032485e7d367f93e6ac418014e2ff · discourse/discourse · GitHub
Também há alguma lógica que trata o caso em que o usuário clica no fundo escurecido para fechar os menus.
Para o menu do usuário:
discourse/app/assets/javascripts/discourse/app/widgets/user-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Para o menu hambúrguer:
discourse/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Alterar isso para que o menu hambúrguer abra e feche na direita envolverá duas coisas.
-
Modificar o componente site-header com ModifyClass para que ele abra todos os menus pelo lado direito. Atualmente, ele verifica uma classe no menu, então simplesmente sobrescrevemos isso assim:
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// não queremos nenhum menu à esquerda, então retornamos false
return false;
}
});
-
Ao fechar o menu, também queremos que ele feche pelo lado direito. Para o evento de rolagem/deslize, isso já é tratado pelo trecho de código acima. Agora precisamos corrigir o caso em que o usuário clica no fundo escurecido. O Discourse decide isso com base em se o site usa ou não um idioma RTL. Para modificar isso, precisamos de um método diferente da plugin-api, já que o painel do hambúrguer é um widget.
O método que vamos usar é reopenWidget, assim:
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// aplica o código do núcleo
this._super(...arguments);
// então faça sua alteração para que ele feche pelo lado direito
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
Agora tudo o que você precisa fazer é adicionar algumas linhas de CSS para sobrescrever os estilos padrão daquele menu, assim:
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
Agora, vamos juntar tudo isso. Isso vai na aba mobile > header do seu tema:
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// não queremos nenhum menu à esquerda, então retornamos false
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// aplica o código do núcleo
this._super(...arguments);
// então faça sua alteração para que ele feche pelo lado direito
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
E isso vai na aba mobile > CSS.
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
Depois de salvar o tema e atualizar a página, o menu hambúrguer abrirá e fechará pelo lado direito no mobile — exatamente como o menu do usuário.
