# Current situation

Begin of the insertion* End of the insertion This is a follow-up of ##55476 Begin of the insertion.

* End of the insertion Begin of the deletion . 

End of the deletion We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the Begin of the insertionapplication (see  #58155). Because of that we currently have inconsistent headers throughout theEnd of the insertion application. Begin of the insertion

* End of the insertion Further, Begin of the deletion with #55476 done,End of the deletion we Begin of the insertionstillEnd of the insertion Begin of the deletion willEnd of the deletion have Begin of the insertionsome very heavy weight angular pages which we wantEnd of the insertion Begin of the deletion removed the uiRouter from the largest frontend module. Thus it should be easyEnd of the deletion to Begin of the insertiontransform towards rails and Primer. The biggest blockerEnd of the insertion Begin of the deletion remove it from the other modules as well. ThisEnd of the deletion is Begin of the insertioncurrentlyEnd of the insertion Begin of the deletion supposed to beEnd of the deletion the Begin of the insertionui-Router and its connection betweenEnd of the insertion Begin of the deletion final ticket of a long list of EPICs to harmonizeEnd of the deletion the Begin of the insertionqueryProps and WP table


End of the insertion Begin of the deletion headers.

End of the deletion # Begin of the insertionUXEnd of the insertion Acceptance

## Begin of the insertion

End of the insertion Begin of the deletion Solution

End of the deletion **PageHeader**

* All pages Begin of the insertioninEnd of the insertion Begin of the deletion ofEnd of the deletion the Begin of the insertionbelow listed module useEnd of the insertion Begin of the deletion application usesEnd of the deletion the PageHeader Primer component following the designs provided.

* 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.

* Follow this rules when it comes to breadcrumb rules:

* **For index or list pages**, display a navigational breadcrumb, including the containing the project (first element) and the groups of the sidebar (inside of the last element):

* eg. Projects / {Project list}

* eg. {Project A} / Members / Work package shares: Edit rights

* eg. {Project A} / Meetings / Upcoming meetings

* Begin of the insertion**For calendars and team planners:** display a navigational breadcrumb, including the the project and considering the calendars/team planners created as views and adding an sidebar entry for "all":

* eg. OpenProject / Calendars / All calendars

* eg. OpenProject / Calendars / Favourite: {Calendar name}

* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).

* End of the insertion In mobile the breadcrumbs will be substituted with the level on top and an arrow back.

* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead). Begin of the insertion

* All the buttons that existed before, will be kept (as Primer buttons)

* Include projects

* (On WP list): Baseline

* etc


End of the insertion Begin of the deletion


End of the deletion **SubHeader**

* All pages where is required will now use SubHeaders that will contain the most relevant actions of the page in a Primer style.

* Check the designs and mockups for references of each specific SubHeader per page.

* In the pages where there is lists or tables bellow the SubHeaders will contain the filters and creation actions.

* SubHeaders might change in the same page context if there is actions that are depending on the selection of the content (eg. multi select of work packages...) Begin of the insertion

* Date navigations (eg. Calendars or Team Planners) will also be partEnd of the insertion Begin of the deletion


# TableEnd of the deletion of Begin of the insertionthe subHeaders.


End of the insertion Begin of the deletion pages to change

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><br data-cke-filler="true"></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>PAGE</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>WORK PACKAGE</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p">VERSION</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br>&nbsp;</span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">BIM details</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###55638</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55638:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br>&nbsp;</span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">My Page</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###56739</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56739:version</p></td></tr></tbody></table></figure>

End of the deletion # Visuals and Figma

**PageHeader**

[https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&amp;node-id=0-1&amp;mode=design](https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design)

**SubHeader**

https://www.figma.com/file/tUkyiLDn5ax7Q9DAhxlS69/Sub-headers-concept?type=design&amp;node-id=0-1&amp;mode=design

<br>