Привет, Лукас, добро пожаловать в Meta 
Здесь задействовано не так много CSS. Анимация обрабатывается через CSS, но значения смещения задаются в JavaScript для обработки случая, когда пользователь прокручивает или перемещает меню вправо или влево, чтобы закрыть его.
Большая часть этой логики находится здесь — это лишь один метод; в этом файле задействовано ещё несколько:
discourse/app/assets/javascripts/discourse/app/components/site-header.js at 8a250a1eac9032485e7d367f93e6ac418014e2ff · discourse/discourse · GitHub
Также есть логика, обрабатывающая случай, когда пользователь кликает по затемнённому фону, чтобы закрыть меню.
Для меню пользователя:
discourse/app/assets/javascripts/discourse/app/widgets/user-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Для гамбургер-меню:
discourse/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Изменение логики, чтобы гамбургер-меню открывалось и закрывалось справа, потребует двух шагов.
-
Модифицируйте компонент site-header с помощью ModifyClass, чтобы все меню открывались с правой стороны. В настоящее время он проверяет наличие класса у меню, поэтому мы просто переопределим это следующим образом:
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// нам не нужны левые меню, поэтому возвращаем false
return false;
}
});
-
При закрытии меню мы также хотим, чтобы оно закрывалось вправо. Для событий прокрутки/перемещения это уже обрабатывается приведённым выше фрагментом. Теперь нужно исправить случай, когда пользователь кликает по затемнённому фону. Discourse принимает решение на основе того, использует ли сайт язык с направлением справа налево (RTL). Чтобы изменить это, нам понадобится другой метод plugin-api, поскольку панель гамбургера является виджетом.
Метод, который мы будем использовать, — reopenWidget, вот так:
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// применяем код из ядра
this._super(...arguments);
// затем вносим изменение, чтобы меню закрывалось вправо
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
Затем вам останется лишь добавить несколько строк CSS, чтобы переопределить стили по умолчанию для этого меню:
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
Теперь соберём всё вместе. Этот код размещается во вкладке mobile > header вашей темы:
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// нам не нужны левые меню, поэтому возвращаем false
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// применяем код из ядра
this._super(...arguments);
// затем вносим изменение, чтобы меню закрывалось вправо
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
А этот код — во вкладке mobile > CSS:
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
После сохранения темы и обновления страницы гамбургер-меню на мобильных устройствах будет открываться и закрываться справа — точно так же, как меню пользователя.
