כיוון החלקה של תפריט המבורגר

מפתח
2

Hey Lukas, welcome to Meta :wave:

There’s isn’t a lot of CSS involved in this. The animation is handled with CSS, but the values for the offset are set in JavaScript to handle the case where the user scrolls/pans to the right or left to close the menus.

Most of that logic is here - that’s just one method; there’s a few others involved in that file
discourse/app/assets/javascripts/discourse/app/components/site-header.js at 8a250a1eac9032485e7d367f93e6ac418014e2ff · discourse/discourse · GitHub

There’s also some logic that handles the case when the user clicks on the dimmed background to close the menus.

for the user menu

discourse/app/assets/javascripts/discourse/app/widgets/user-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

For the hamburger menu

discourse/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

Changing those to make the hamburger menu open and close on the right will involve two things.

  1. modify the site-header component with ModifyClass so that it opens all the menus from the right side. It currently checks for a class on the menu, so we simply override that like so

    api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // we don't want any left menus, so return false
    return false;
  }
});

  2. when closing the menu, we also want it to close to the right side. For the scroll/pan event, this is already handled by the snippet above. Now we need to fix the case where the user clicks on the dimmed background. Discourse decides that based on whether or not the site uses an RTL language. To modify this, we need a different plugin-api method since the hamburger panel is a widget.

    The method we’re going to use is reopenWidget like so

     api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // apply the code from core
    this._super(...arguments);

    // then make your change so that it closes to the right side
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});

Then all you need to do is add a couple of lines of CSS to override the default styles for that menu like so

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

Now let’s put all of that together. This goes in the mobile > header tab of your theme

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // we don't want any left menus, so return false
    return false;
  }
});

api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // apply the code from core
    this._super(...arguments);

    // then make your change so that it closes to the right side
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});
</script>

and this goes in mobile > CSS tab.

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

Once you save the theme and refresh the page, the hamburger menu will open and close on the right side on mobile - just like the user menu.