# Motivation

For our goal to move closer to Primer and use those components within OpenProject, we want to primerize the app header

# Acceptance

* The app header uses Primer components for

* All menus (quick add, Begin of the deletion modules,End of the deletion help, User menu)

* All buttons Begin of the insertion(notifications, help (if it is a link only instead of a menu)

End of the insertion Begin of the deletion (Menu toggle, notifications)

End of the deletion * Begin of the insertion_Open: Shall the notification icon change?_

* _Open: Primer::IconButton do not support any kind of trailing counter. How shall we display the number of unread notifications? Probably has to be something custom...._

* End of the insertion Begin of the deletion **Open:**End of the deletion The Begin of the insertionsearch will stay an angular component but look more primerized (with rounded borders, like the autocompleteres look for example in meetings)

* TheEnd of the insertion project Begin of the insertionselector will remain in angular, but the button will look primerized

End of the insertion Begin of the deletion selection (see below)

End of the deletion * The new header works with existing plugins (openDesk, Nextcloud Project, Begin of the insertionDB,End of the insertion ...)

* The code of the `top_menu_helper` is cleaned up


## Begin of the deletion Open

* Can we use the Primer SelectPanel for the project selection? Depends on when and to which scope the component is added to the repo by the primer team.

* Shall we just primerize what is already there, or rework the header completely


##End of the deletion Visuals

Begin of the insertionworkPackageValue:56583:MockupsEnd of the insertion Begin of the deletion First draft: https://www.figma.com/design/uYn5FqlKTpRz1i15tG7U2j/Primer-components?node-id=0-1&t=4EPAcHqdQU1rqcy1-0End of the deletion

## **Out of scope**

* Do not rework the functionality of the search Begin of the insertion

* Do not change the implementation of the modules menu; will be done in <mention class="mention" data-id="65090" data-type="work_package" data-text="##65090">##65090</mention>

* Do not change the implementation of the project selector; can be done once <mention class="mention" data-id="63717" data-type="work_package" data-text="##63717">##63717</mention> is doneEnd of the insertion