Navigation Bar

[Serco627]

Implement Navigation Bar

Value Proposition

As a user

I want to have easy navigation across the application with a consistent navigation

so that I can navigate between the pages.

Description

Acceptance Criteria

• Navigation Bar Design:
  • Position: The navigation bar should be fixed at the bottom of the screen on all pages.
  • Icons: Include icons for the following sections:
  • Home: Icon to navigate to the Home Page.
  • Workouts:*Icon to navigate to the Workouts List Page.
  • Exercises: Icon to navigate to the Exercise Details Page
  • The navigation bar should have a background color that matches the application’s theme.

Tasks

• [ ] Decide on the icon library or custom SVGs to use.

• [ ] Design the navigation bar layout and choose icon styles.

• [ ] Create a new file components/NavigationBar.js.

• [ ] Implement the NavigationBar component with icons for Home, Workouts, and Exercises.

• [ ] Define and apply the background color and padding for the navigation bar.

• [ ] Style the icons for visual clarity and active state.

• [ ] Ensure responsive design for different screen sizes.

• [ ] Import the NavigationBar component into the Home Page, Workouts List Page, and Exercise Details Page.

• [ ] Ensure that the navigation bar is functional and navigates to the correct pages.