Fix mobile hamburger menu positioning and slide animation direction

[Copilot]

The mobile hamburger menu was not functioning properly on mobile devices because the navigation sidebar was positioned outside the viewport due to incorrect CSS transform values. Additionally, the menu was sliding in from the wrong direction, creating a poor user experience.

Problem

When users clicked the hamburger menu button (☰) on mobile devices, the menu appeared to do nothing. Upon investigation, the sidebar was actually being rendered but positioned completely off-screen to the right of the viewport, making it invisible to users. After fixing the initial positioning issue, the menu was sliding in from the left, which felt unnatural since the hamburger button is positioned on the right side.

Root Cause

The issue was in src/scss/main.scss where the .navbar-sidebar had a CSS transform that positioned it 100% to the right:

.navbar-sidebar {
  left: inherit;
  right: 0;
  transform: translate3d(100%, 0, 0);  /* This pushed it outside viewport */
}

This transform was interfering with Docusaurus's built-in mobile navigation positioning and animation system.

Solution

Updated the CSS to properly handle both the hidden and visible states of the mobile menu:

1. Hidden state: Menu positioned off-screen to the right with transform: translate3d(100%, 0, 0)
2. Visible state: Menu slides in from the right with transform: translate3d(0, 0, 0) when .navbar-sidebar--show class is applied

.navbar-sidebar {
  left: inherit;
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.navbar-sidebar--show .navbar-sidebar {
  transform: translate3d(0, 0, 0);
}

This creates a natural slide-in animation from the right side, matching the hamburger button position.

Testing

• ✅ Verified hamburger menu opens and closes correctly on mobile
• ✅ Confirmed menu slides in from the right side as expected
• ✅ Tested across multiple mobile screen sizes (375px, 414px)
• ✅ Confirmed sidebar is properly positioned within viewport when open
• ✅ Smooth animation transitions work correctly
• ✅ Build process remains unaffected

The mobile hamburger menu now works as expected with improved UX across all mobile devices!

Fixes #710.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

@ccamel 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ready	Preview	Comment	Sep 10, 2025 5:26pm

[ccamel]

@copilot Looks good and the menu shows up now 👍 But, AFAIS right now it slides in from the left, which feels off since the burger is on the right. UX-wise we can't ship it like this though, the menu needs to slide in from the right, not the left.

Can you adjust the hidden state/transform so it behaves accordingly?
Thanks! 🙏

[Copilot]

@copilot Looks good and the menu shows up now 👍 But, AFAIS right now it slides in from the left, which feels off since the burger is on the right. UX-wise we can't ship it like this though, the men...

Fixed! The mobile menu now slides in from the right side as expected, matching the hamburger button position. The CSS has been updated to use transform: translate3d(100%, 0, 0) for the hidden state and transform: translate3d(0, 0, 0) for the open state, creating the proper right-to-left slide animation.

Changes in commit 800345a.

[ccamel]

Excellent! Thanks ❤️

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[bot-anik]

Device	URL
desktop	http://localhost:3000/

Device	URL
mobile	http://localhost:3000/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead