dynamic Header

[StephanLippert]

As a User I want to have a header. in order to see on which Page i currently am

Description

Acceptance criteria

• [ ] a header on each site at the top, witch shows the name of the current page:
  • [ ] editPage: "Edit your recipe"
  • [ ] detailPage: "{recipe.title}"
  • [ ] addNewRecipe: "Add new Recipe"
  • [ ] homePage: "My Digital Recipe Book App"

Tasks

• [ ] create new branch "US10-header"
• [ ] create new Component "Header.js"
• [ ] Display-Flex, Position-Fix, z-Index
• [ ] insert header to:
  • [ ] "editPage"
  • [ ] "detailPage"
  • [ ] "addNewRecipe"
  • [ ] "homePage"

[luederb]

Hey @StephanLippert, congrats for this clear and simple user story 👍

We have an idea that you might wanna consider in your group: Since your header for the homepage "My Digital Recipe Book App" is quite long, we were wondering if you could run into the problem that the title text is bigger than the header container or you'd need to resize the font size. Perhaps you want to make a general decision about adding a second text-line or resizing the font size in situations like this? That could also be an acceptance criteria:

• [ ] The header should only be displayed in one line. The font size is adapted in order to make this possible or
• [ ] The font size of the header should always be the same. Long headers wrap to a second line.

Great work 🥳