Open
Description
Description
As a user,
I want the top navigation bar to visually indicate the currently active page,
So that I always know which page I'm on within the application.
Tasks
- Analyze the current implementation of the top navigation bar (Home, Notes, Map, About).
- Update the styling (text color) to differentiate the active page (the one the user is currently on).
- Ensure the color updates correctly when navigating between the different pages.
- Regression test to confirm no existing navigation functionality is broken.
Create test cases for:
- Rendering the navigation bar with the correct item highlighted.
- Navigating between pages and updating the active state correctly.
Acceptance Criteria
- The active page in the top navigation bar is visually distinguishable.
- Clicking any word in the top bar updates the color visually and changes to the correct page.
- The navigation bar works across all supported devices and screen sizes.
- All test cases pass before merging the changes.
- No existing navigation functionality is broken.
- Code is clean, well-commented, and follows the project's code style guide.
Photo to demonstrate what should occur. This would indicate that the user is on the "Map" page as it is a different color than the other pages available.