[UI/UX]: Add Active State Highlighting to Mobile Navigation Sidebar

[Utkarsh-660]

Hi,
I'm a SWoC Season 6 contributor.

Requesting you to review below and assign me this issue:

Description: While navigating the mobile version of the application, the sidebar menu does not visually indicate which page is currently active (e.g., Home, Leaderboard, Privacy). This makes it difficult for users to track their location within the app.

Current Behavior: All links in the mobile navigation drawer look identical, regardless of the current URL or route.

Proposed Change: Implement dynamic highlighting for the active route within the Sidebar component. Using React and Tailwind CSS, we should apply specific conditional styles to the active menu item to distinguish it from the rest.

Impact:

1. Improves navigation clarity for mobile users.
2. Provides immediate visual feedback upon route changes.
3. Enhances the overall professional feel of the UI.

[Utkarsh-660]

Hi @akash-kumar-dev, please assign me this issue if this looks good.
Thank you! 😊

[akash-kumar-dev]

Looking forward to your solution. Assigning this issue to you.

[Utkarsh-660]

Thank you for assigning this to me, Akash! Will surely try my best with it! :)