Create page components and navigation with React Router

[albert-schilling]

Value Statement

As a user I can switch between the different pages via the bottom navigation.

Description (Text, Scribble, Wireframe, Design)

• A footer at the bottom shows three different symbols.
• Clicking a symbol brings the user to the specified page.
• Scribble:

Acceptance Criteria

• [x] Click on a different symbol inside the footer navigation bar opens a different page.

Tasks

• [x] Create a new component per page.
• [x] Create the necessary components for the footer and the navigation.
• [x] Install a package that allows for Routing (e. g. React Router or Reach Router).
• [x] Implement the routing in the app component.
• [x] Use lazy loading for all pages except the start page.
• [x] Add the styling for footer and navigation according to the Wireframe.
• [x] Test in mobile and desktop view in Firefox, Chrome, Safari and Edge.
• [x] Write unit and e2e tests
• [ ] Include the components in Storybook and mdx Storybook Documentation.

Size

Medium