A_019 Navigation menu refactor | Step 3: Navigation list component layout

Background

This epic is looking into the navigation bar which has been slowly tweeked over time. As one of the initial work packages done as a team, there were no annotations or space indicators when developed. We want to review the nav bar and improve it based on the initial concept. This could mean a 1. refactor or perhaps only 2. some changes in the code. The nav bar spacings and reactability to screen change may not be set correctly and could be causing issues with the nav bar.

What to do

• Set the padding of the nav bar elements
  • nav bar left border to icon
  • icon to label
• Set the minimum padding of nav bar elements
  • The label to nav bar right border minimum
  • The label space: word breaks if longer
  • Height distance between labels
• Screen size reactibly
  • The label to nav bar right border is determined by the screen size
• Please talk with Katrin about any interaction or questions
• Please add any required unit tests
• Please check that no e2e tests are affected and fix them

figma