Replace navbar menu button text with hamburger icon on mobile

[seanh1995]

This pull request improves the accessibility and user experience of the main navigation menu button by updating its HTML structure and adding visual indicators for its state. The changes also introduce CSS for a menu icon that toggles between a hamburger (menu) icon and a close (X) icon based on the menu’s open state.

Navigation Accessibility and Visual Improvements:

• Updated the menu button in BaseLayout.astro to include a visually hidden label (sr-only) for screen readers and a span with the menu-icon class for displaying the icon.
• Added CSS in global.css to display a hamburger icon (☰) by default and switch to a close icon (✕) when the menu is open (aria-expanded="true").

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 03db04d1-2e3d-4d37-b84f-950555811c49

📥 Commits

Reviewing files that changed from the base of the PR and between 586615d and 2b7bc2a.

📒 Files selected for processing (2)

• src/layouts/BaseLayout.astro
• src/styles/global.css

Included review availability: Your plan provides up to 2 included reviews per hour; 0 remain after this review.

---

📝 Walkthrough

Summary by CodeRabbit

• Style
  • Updated the mobile navigation toggle to display a compact menu icon instead of visible “Menu” text.
  • The icon changes to a close symbol when the navigation menu is expanded.
  • Preserved screen-reader accessibility and existing menu controls.

Walkthrough

The mobile menu toggle replaces visible text with a decorative icon and a screen-reader-only label. CSS displays a hamburger glyph when collapsed and a close glyph when expanded. Existing menu control attributes remain unchanged.

Changes

Mobile menu icon

Layer / File(s)	Summary
Icon toggle behavior src/layouts/BaseLayout.astro, src/styles/global.css	The button now renders an accessible menu icon while preserving its menu control attributes. The icon changes from a hamburger glyph to a close glyph when aria-expanded="true".

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 2b7bc

This localized navigation update changes the mobile menu presentation and accessible labeling without any identified merge-blocking risk remaining after normal checks and review.

Suggested reviewers: christitustech

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: replacing the mobile navbar menu button text with a hamburger icon.
Description check	✅ Passed	The description is directly related to the changeset and explains the accessibility update, icon rendering, and state-based hamburger-to-close transition.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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