Skip to content

Top Bar Indicator #219

Open
Open
@amychen108

Description

@amychen108

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.
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions