fix: add aria-expanded to hamburger, aria-label to mobile theme toggl…

[Harkiratcodess]

Fixes #169

Changes

1. Hamburger button — added aria-expanded
The mobile menu toggle was missing aria-expanded, screen readers
couldn't tell if the menu was open or closed. Fixed by binding it
to the isOpen state along with an aria-label.

2. Mobile theme toggle — added aria-label
The theme toggle button on mobile was icon-only with no label.
Added aria-label that updates based on the current theme,
matching the desktop button behaviour.

3. Active route highlight — fixed for sub-routes
Nav items weren't getting highlighted on nested routes like /learn/dsa
because it was using strict equality (===). Replaced with startsWith()
with a special case for / so Home doesn't stay always active.

Files Changed

• client/src/components/Navbar.tsx

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Fixed navigation active state highlighting behavior
  • Mobile menu now closes when navigating to links
  • Improved mobile menu accessibility features

• Style

  • Refreshed navigation layout and formatting for desktop and mobile
  • Enhanced theme toggle button and user avatar popover displays

  Note: This PR includes accessibility fixes (aria attributes) —
  open to any label the maintainer sees fit.

[coderabbitai]

Warning

Rate limit exceeded

@Harkiratcodess has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 47 minutes and 37 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 265cec1a-5b4b-4eef-aac4-cc833f957da8

📥 Commits

Reviewing files that changed from the base of the PR and between 4a871c9 and 69be07a.

📒 Files selected for processing (1)

• client/src/components/Navbar.tsx

📝 Walkthrough

Walkthrough

Navbar.tsx receives three critical accessibility fixes from issue #169: desktop nav items now correctly highlight sub-routes using startsWith matching instead of strict equality, the mobile hamburger toggle gains aria-expanded and aria-label attributes, and the mobile theme toggle adds aria-label. The mobile menu now closes when items are selected. Multiple UI elements receive multi-line formatting improvements.

Changes

Navbar Accessibility and Active State Improvements

Layer / File(s)	Summary
Desktop navigation active-state detection for sub-routes client/src/components/Navbar.tsx	Desktop nav item highlighting changes from exact path equality to exact match for Home and startsWith for other nav items, fixing the issue where nested routes like /learn/dsa fail to highlight their parent nav link.
Mobile hamburger and menu accessibility improvements client/src/components/Navbar.tsx	Mobile hamburger toggle gains aria-expanded and aria-label attributes, mobile theme toggle gains aria-label, and the expanded nav panel renders primary links via MobileNavLink component with click handlers that close the menu on both item selection and logout.
UI formatting and markup improvements across desktop and mobile client/src/components/Navbar.tsx	Icon import list, role-based link routing, and brand logo image reformatted to multi-line; desktop theme toggle, avatar trigger, and account popover headers use multi-line AvatarImage, PopoverTitle, and PopoverDescription markup; mobile account popover header similarly reformatted.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

good first issue, level:beginner, gssoc:approved

Poem

A nav that knew no nested ways,
Now highlights all the sub-route days,
With aria-labels bright and clear,
The menu closes— accessibility's here! 🐰✨
Desktop, mobile, side by side,
Reformatted with humble pride.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes reformatting of unrelated UI elements (brand logo, user avatar popover, mobile nav links) that exceed the scope of the three accessibility fixes outlined in issue #169.	Separate out-of-scope formatting changes into a distinct PR to keep this change focused on accessibility fixes per issue #169.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately reflects the main accessibility improvements: adding aria-expanded to hamburger and aria-label to mobile theme toggle, which are core objectives.
Linked Issues check	✅ Passed	All three coding objectives from issue #169 are addressed: aria-expanded added to hamburger button, aria-label added to mobile theme toggle, and active route highlighting fixed using startsWith with root path exception.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@client/src/components/Navbar.tsx`:
- Around line 334-340: Replace the raw HTML <button> in Navbar.tsx with the
shared Button component from client/src/components/ui/button.tsx: import Button,
use the Button in place of the element that calls handleLogout and setIsOpen
(the onClick should call handleLogout(); setIsOpen(false)), map the existing
classes/behavior to Button props (choose appropriate variant — likely "ghost" or
"danger" per style guidelines — and size "sm" and apply full-width styling via
className="w-full text-left" if needed), and remove the old border/hover classes
so the reusable Button handles styling and accessibility.
- Around line 84-87: The active-route calculation for Navbar is too permissive
and marks sibling routes as active; update the logic that sets the active
variable (the block using item.href and location.pathname) to treat a route as
active only if location.pathname === item.href OR
location.pathname.startsWith(item.href + "/") — keep the existing special-case
for item.href === "/" to match only root — so replace the startsWith(item.href)
check with a startsWith(item.href + "/") check combined with an exact equality
check to avoid false positives.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cd71f7e4-1e25-477f-8ee3-997df57ce1ac

📥 Commits

Reviewing files that changed from the base of the PR and between 3552efa and 4a871c9.

📒 Files selected for processing (1)

• client/src/components/Navbar.tsx