fix: reorder Mobile Menu

[danielroe]

Before

after

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 8, 2026 0:28am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored		Feb 8, 2026 0:28am
npmx-lunaria	Ignored		Feb 8, 2026 0:28am

[codecov]

Codecov Report

❌ Patch coverage is 36.36364% with 14 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Header/MobileMenu.client.vue	36.36%	12 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The mobile menu component is restructured to prioritise account and status information at the top. The update introduces an account section with status buttons for npm CLI and Atmosphere that trigger corresponding modals. Avatar handling is added with fallback icons and user information display. The navigation structure is reorganised with a consolidated flow: account/status area, divider, navigation block with app navigation and connected-user links, followed by informational links. UI dividers separate sections throughout. Existing route-change close and keyboard handling behaviours are maintained with updated focus trap and scroll lock logic.

Possibly related PRs

• chore: remove duplicated footer content #986: Modifies the same MobileMenu component to alter its layout and content structure.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description provides visual before/after screenshots that clearly demonstrate the mobile menu reorganisation, directly corresponding to the code changes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/mobile-menu-order

---

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

[coderabbitai]

Actionable comments posted: 1

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Remove structural template comments that don’t explain logic.

The added section/divider comments are purely structural and don’t clarify non-obvious behaviour. Please drop them (or replace with semantic wrappers if needed).

🧹 Suggested cleanup (apply similarly to other section labels)

-            <!-- Account section -->
             <div class="px-2 py-2">
@@
-              <!-- npm CLI connection status (only show if connected) -->
               <button
@@
-              <!-- Divider -->
-              <div class="mx-4 my-2 border-t border-border" />
+              <div class="mx-4 my-2 border-t border-border" />

As per coding guidelines, “Add comments only to explain complex logic or non-obvious implementations”.

Also applies to: 110-110, 135-135, 159-159, 173-173, 176-176, 178-178, 198-198, 220-220, 223-223, 244-244, 247-247