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

**URL:** <https://meta.discourse.org/t/hamburger-menu-slide-direction/208168>\
**Category:** Development\
**Created:** [3 בנובמבר,‏ 2021,‏ 9:10pm UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168 "2021-11-03T21:10:50Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [5 בנובמבר,‏ 2021,‏ 5:33am UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168/2 "2021-11-05T05:33:51Z")

</div>

Hey Lukas, welcome to Meta 👋

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](https://github.com/discourse/discourse/blob/8a250a1eac9032485e7d367f93e6ac418014e2ff/app/assets/javascripts/discourse/app/components/site-header.js#L40)

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](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/widgets/user-menu.js#L267-L296)

For the hamburger menu

[discourse/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L368-L397)

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](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L166-L182) so that it opens all the menus from the right side. It currently [checks for a class](https://github.com/discourse/discourse/blob/8a250a1eac9032485e7d367f93e6ac418014e2ff/app/assets/javascripts/discourse/app/components/site-header.js#L354) on the menu, so we simply override that like so

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](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L381-L383). To modify this, we need a different plugin-api method since the hamburger panel is a widget.

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

```scss
.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

```xml
<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.

```scss
.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.

---

_[View the full topic](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168)._