#1078: [Feature]: Add active state styling to top nav bar for subpages under /contest path
Issue #1078 by dhuruvandb
[Feature]: Add active state styling to top nav bar for subpages under /contest path
Is your feature request related to a problem? Please describe.
When a user clicks the "Contest" button in the top navigation bar, it navigates them to the /contest page, where there are four options: Contest, Challenges, Hackathons, Internships, and Jobs. Since all of these options are subpages under the /contest path, it would be beneficial to apply active state styling to the "Contest" button in the top nav bar when any of these subpages are visited. This way, users will have a clearer understanding of their current section on the website, improving the user experience.
The active state is applying when clicking contest button
!image
It is now not being active even though it is related to contest section
!image
Describe the solution you'd like
Update the navigation logic: Modify the condition that checks if the "Contest" button should be highlighted. Specifically, check if the location.pathname starts with /contest, including all subpages (e.g. /challenges or /hackathons).
Add active state styles: When the current page is part of the /contest section, add background color and text color change to the "Contest" button in the navigation bar.
These are the changes i want to implement
!image !image Alternatives No response Additional Context No response Are you interested in contributing? - [X] I'd like to work on this issue Code of Conduct - [X] I have used the search function to check if an issue already exists - [X] I agree to follow this project's Code of Conduct Which program are you contributing in? Not applicable
These are the changes i want to implement
!image !image Alternatives No response Additional Context No response Are you interested in contributing? - [X] I'd like to work on this issue Code of Conduct - [X] I have used the search function to check if an issue already exists - [X] I agree to follow this project's Code of Conduct Which program are you contributing in? Not applicable
0 Replies