# User Problem

## Problem

* Currently there are multiple implementations of PageHeaders due to the introduction of Primer as Design System.
* There is a lack of how we expect the different types of Headers in the application to behave and look.
* The PageHeaders components have been analyses individually per page where Primer has been introduced but not as a global for the app.

# Business Case

## Solution

* All pages of the application uses the PageHeader Primer component following the designs provided. This is the global objective of this EPIC but we can continue to adapt the app page by page accepting that there will be differences in the meantime.
* Limit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).
* The header will always be the default size, not the large one (adapt Meetings pages to this rule).
* Follow this rules when it comes to breadcrumb rules:
* **For index or list pages**, display a navigational breadcrumb, including the containing groups of the sidebar Begin of the insertionand the project:End of the insertion Begin of the deletion if they are static views:End of the deletion
* eg. Projects / {Project list}
* eg. Begin of the insertion{Project A} /End of the insertion Members / Work package shares / Edit rights
* eg. Begin of the insertion{Project A} /End of the insertion Meetings / Upcoming meetings
* **For settings pages**, display a navigational breadcrumb:
* eg. Administration / File storages / {Storage name}
* eg. My account / Email reminders
* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* **For individual Begin of the insertionmeetings:**End of the insertion Begin of the deletion meetings, calendars etc**,End of the deletion do not show breadcrumbs (since there cannot be a hierarchy).
* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead).
* In mobile the divider will not disappear (opposed to the current implementation) and the PageHeader will contain a maximum of 1 action. If there is multiple actions this action will be a three dots vertical more menu.
* For all the pages that can be saved or saved as the designed behaviour of a message to save the view will automatically appear when the view is modified (see designs and Project Lists for reference).
* This harmonisation its linked and dependant on the harmonisation of page sub-headers specified in the work package ###52401.

## Next iteration

* Probably this will need multiple iterations to modify all headers in the application.

# Visuals and figma

https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design