fix: Product menu remains in active state after dropdown is closed

[ooye-sanket]

What does this PR do?

Fixes the bug where the "Products" navigation menu item remains in its active (red) state after the dropdown is closed and the mouse is moved away from the menu item.

Changes made:

• Updated the button class logic in ProductsSubmenu.svelte to use !text-accent for proper CSS specificity when dropdown is open
• Added transition-colors utility class for smooth color transitions between states
• Ensures the active state properly clears when $open state becomes false

Test Plan

Steps to verify the fix:

1. Navigate to https://appwrite.io (or run the website locally)
2. Click on "Products" in the top navigation bar
3. Observe that the menu item turns red and dropdown opens
4. Click on "Products" again to close the dropdown
5. Move the mouse away from the "Products" menu item
6. Expected result: The "Products" menu item should return to its default (non-active) color
7. Before fix: The menu item would remain red/active
8. After fix: The menu item properly returns to default color

Additional test cases:

• Hover over "Products" → should turn red
• Move mouse away → should return to default color
• Click to open dropdown → should stay red while open
• Click outside to close dropdown → should return to default color

Related PRs and Issues

Closes #11029 [https://github.com/appwrite/appwrite/issues/11029]

Screenshots

Before fix:
(The Products menu remains red after closing dropdown)

After fix:
(The Products menu returns to default color after closing dropdown)

Screenshots

Have you read the Contributing Guidelines on issues?

Yes, I have read and followed the Contributing Guidelines.

[coderabbitai]

Walkthrough

This change modifies the styling of the ProductsSubmenu component button element. The modification reorders focus and hover Tailwind utility classes and adds a transition-colors class to animate color changes. Additionally, the conditional text color applied when the dropdown is open was updated to use the !text-accent utility class instead of text-accent, which applies the accent color with increased specificity.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 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 pull request title accurately describes the main bug fix in the changeset: fixing the Products menu remaining in active state after dropdown is closed.
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 43af478.

📒 Files selected for processing (1)

• src/lib/components/ProductsSubmenu.svelte

🔇 Additional comments (2)

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

96-96: LGTM! Good improvements for smoother UX.

The addition of transition-colors enables smooth color transitions between states, and reordering hover before focus aligns with best practices for interactive elements.

---

98-98: Correct fix for the active state persistence issue.

Using !text-accent (with !important via the ! prefix) ensures the accent color takes precedence over hover/focus states when the dropdown is open. When $open becomes false, this class is removed and the button correctly returns to the text-primary base state. This addresses the bug where the menu item remained red after closing.

---

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