fix: reset navbar active state after dropdown close

[KushalLamba]

What does this PR do?

Resolves an issue where the Products navigation item stayed highlighted after its dropdown was closed.

The menu state now correctly reflects whether the dropdown is open or not.

---

What was changed?

• Updated the focus styling to use focus-visible:text-accent instead of focus:text-accent for more accurate focus behavior
• Added transition-colors to provide smoother visual state changes
• Simplified conditional class handling by switching from object syntax to a ternary expression
• Ensured the active style is removed when the dropdown closes and focus is lost via mouse interaction

---

Test Plan

1. Open the website
2. Click Products in the top navigation
3. Close the dropdown
4. Move the cursor away

Expected:
The Products menu item returns to its default color.

---

Additional checks

• Hover shows active color
• Dropdown open keeps active color
• Clicking outside resets the state correctly

---

Related Issue

Closes #11029

Summary by CodeRabbit

Style

• Enhanced button styling in the product submenu with improved visual transitions and refined hover and focus state effects.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The ProductsSubmenu.svelte component's button class composition logic has been refactored from a conditional object-based approach to a string-based class set. The change adds transition-colors as a constant class, introduces separate hover and focus state classes, and replaces the conditional text-accent logic with a ternary operator that switches text color based on the open state. These modifications affect how the button transitions and responds to user interactions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ 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 describes the primary change: fixing the navbar active state to reset after dropdown closure. It is directly aligned with the main objective and the file changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5e20f60 and 66bf3d1.

📒 Files selected for processing (1)

• src/lib/components/ProductsSubmenu.svelte

🔇 Additional comments (1)

src/lib/components/ProductsSubmenu.svelte (1)

96-98: Excellent fix! The changes correctly address the navbar highlighting issue and follow accessibility best practices.

The refactoring properly resolves the problem where the button remained highlighted after the dropdown closed:

1. focus-visible:text-accent — This is the key improvement. Unlike focus:text-accent, this only applies focus styling during keyboard navigation, not after mouse clicks, which directly fixes the issue where the button retained its accent color after clicking.

2. Explicit state management — The ternary $open ? 'text-accent' : 'text-primary' ensures the text color always reflects the dropdown state, with a guaranteed return to text-primary when closed.

3. Smooth transitions — transition-colors provides polished color transitions between states.

The implementation correctly handles all interaction scenarios: hover, keyboard focus, open state, and the critical case of mouse-click close.

---

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.}

[Copilot]

Pull request overview

This PR fixes a UI bug where the Products navigation menu item remained highlighted after closing its dropdown menu. The fix improves focus management and visual state handling by using more appropriate CSS pseudo-classes and simplifying the conditional styling logic.

• Changed focus styling from focus:text-accent to focus-visible:text-accent for better keyboard navigation UX
• Added transition-colors for smoother visual state transitions
• Refactored conditional class handling from object syntax to a cleaner ternary expression

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.