Sidebar

Create a React sidebar component that can be toggled open or closed with a menu button. The sidebar appears on the right side of the screen and includes navigation items with hover effects.

Requirements

• The interface must include:

  • A sidebar positioned on the right side of the viewport.
  • A toggle button (with a menu icon) that is always visible and vertically centered on the right edge of the screen.
  • Use "Menu" icon form lucide-react

• Default Behavior:

  • The sidebar is hidden by default.
  • The toggle button remains fixed and accessible at all times.

• Toggle Functionality:

  • Clicking the toggle button opens or closes the sidebar.
  • The sidebar should slide in and out from the right with a smooth transition effect.

• Sidebar Content:

  • When open, the sidebar displays a vertical list of navigation items:
    • Home
    • About
    • Services
    • Contact
  • Each navigation item should have a clear and smooth hover effect for better user interaction.

Data Test IDs (required for testing):

• data-testid="sidebar" — sidebar container div
• data-testid="btn-toggle" — toggle button element
• data-testid="icon-menu" — menu icon inside toggle button
• data-testid="nav-menu" — container for nav items when sidebar is open
• data-testid="nav-item-home" — nav item Home
• data-testid="nav-item-about" — nav item About
• data-testid="nav-item-services" — nav item Services
• data-testid="nav-item-contact" — nav item Contact

Reference UI