Navigation Design

[JensRavens]

As part of #43 a basic idea for a navigation bar was created. In this story, we want to build a design for the navigation of the app.

Acceptance Criteria

• a design for the navbar across breakpoints has been created
• the design uses variables for colors and text styles for all texts

[nikitarthbn]

Shaping notes

-create a hi-fid version of the chosen navbar design -create a master component for the navbar -create variables and text styles -create desktop, tablet and mobile

[nikitarthbn]

@ckroter which navbar are we going to use?

[clarazorzoli]

I was having a look today at the navigation for the sprint cards, and thought it would be nice to have a way to navigate to the upcoming sprints (without them taking too much space on the top), so left this comment here to remember

[nikitarthbn]

@clarazorzoli please feel free to also show your idea in figma and would also like your input on the current sprint card we're doing here 😄

[jessieaspiras]

@ckroter @JensRavens here's the refined navigation: Figma link

The navbar would not expand but upon hover, there is going to be a tooltip that shows the label.

[JensRavens]

Just had a look at the file and the entry is still under design studies. Shouldn't this on a hi-fid page? Please make sure to only have the final design for all breakpoints there (I guess the result is iteration 2 for desktop and using iteration 1 for mobile, but it's not clear from the file)

[nikitarthbn]

@JensRavens I moved the finals designs to the hi-fid page, you can view the prototype here:

Desktop Tablet Mobile