fix: sidebar hover overlapping active state

[Dinesh7571]

Description

Fixes the sidebar hover state overlapping issue when an item is active.

Previously, when one sidebar item was active and another item was hovered, the hover background visually overlapped or interfered with the active item's styling. This created inconsistent UI behavior across sections like Legal, Quick Start, and Components.

This PR ensures:

• Active item maintains a stable and clear visual state
• Hover effects apply only to non-active items
• Smooth transition is applied for better UX

Fixes #87

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Tested locally with dev server
• Checked against Lint & TypeScript errors

Steps to verify:

1. Navigate to sidebar
2. Select any item (e.g., "Terms")
3. Hover over another item (e.g., "Privacy")
4. Confirm:
   • Active item remains unchanged
   • Hover effect applies only to hovered item
   • No visual overlap occurs

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Added new component/dashboard to registry and checked indexing numbers