search

saurabhbakolia / SCROLLME--ECOMMERCE-WEBSITE

ScrollMe is an open-source eCommerce platform built with JavaScript, React, Styled Components, Node.js (Express), and MongoDB. It offers a modern shopping experience with a scalable backend, perfect for contributors or those learning modern web development.
https://www.scrollme.online/
MIT License
19 stars 64 forks source link

Enhance Navbar with Active Page Styling and Hover Effects #211

Closed Siddhart2004 closed 3 weeks ago

Siddhart2004 commented 1 month ago

Issue Report

Enhance Navbar with Active Page Styling and Hover Effects

Description

The current Navbar component lacks visual indicators for the active page and hover effects, making it less intuitive for users to know which page they are on. This issue proposes adding active page styling and hover effects to improve user experience.

Proposed Changes

  1. Highlight Active Page:

    • Use useLocation from react-router-dom to track the current path.
    • Apply conditional styling (bold text, teal color) to the active page link.

  2. Hover Effects:

    • Add a hover effect to change the link color to teal when the user hovers over it.

Screenshots (if applicable)

If applicable, please attach any relevant screenshots or visual aids that help illustrate the issue.

image

The above ss is the navbar which is already present which doesn't have active page styles and hover effects.

image

The above is the ss after applying active page styles and hover effects. It is easy to find which page are we in if we have active page styles.

github-actions[bot] commented 1 month ago

👋 Thank you @Siddhart2004 for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!

Siddhart2004 commented 1 month ago

@saurabhbakolia assign this task to me and kindly add gssoc and hacktoberfest labels .