#### **Context**

We're increasingly using the [Primer Sub Header](https://qa.openproject-edge.com/lookbook/pages/patterns/sub_header) component in different pages. This provides the user with a toolbar with additional actions related to the objets contained below. Most pages have a very limited number of elements on the sub header; they work just as well in mobile devices. In others, some Meetings index pages, there are too many and it all appears squished.

This feature seeks to define mobile behaviour at a component level in order to avoid case-by-base overrides as much as possible.

#### **Acceptance criteria**

The Sub Header adapts to mobile screens:

* All buttons turn into icon buttons without labels, and without trailing icons (eg. dropdown)

* This is for both the left- and the right-side buttons

* Segmented controls Begin of the insertionturnEnd of the insertion Begin of the deletion also goEnd of the deletion into Begin of the insertiondrop-downs

End of the insertion Begin of the deletion icon-only mode

End of the deletion * Begin of the insertionRepresented by a button with dropdown; the label of the current selection becomes the label of the button

* End of the insertion If there are badges (notably on the 'Filter' tab) these will be displayed

* All subheader items must have an icon specified, even if the desktop version does not show an icon (eg. 'Filter')

* Currently, Begin of the insertiontheseEnd of the insertion Begin of the deletion three types ofEnd of the deletion actions have been identified:

* Search (on mobile, the currently implementation takes the full length when clicked)

* Filter

* Segmented controls Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the deletion _\[open\] Can segmented controls be converted to drop-down on mobile, like on the GitHub notification center?_

* ~~A new slot needs tobe added to it and segmented controls must also have icons in their desktop variant.~~

* End of the deletion Buttons

* If there are no actions on the left side of the SubHeader on desktop, this space will remain empty on mobile too

* Begin of the insertionThe center text will:

* If left slot is empty: go to left side and truncate to available width

* If left slot is not empty: go to a new line and is left aligned

* All actions that do not have a visible label need a title or ARIA label for accessibilty

* End of the insertion ~~The right-side actions (usually a solitary primary add "+ {Object} button) will remain in its full form. They will not go into icon-only mode.~~ Begin of the deletion

* All actions that do not have a visible label need a title or ARIA label for accessibilty End of the deletion


#### **Out of scope**

* These adaptation don't take the upcoming quick filters into account:

* ###57964


**Tasks**

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Discuss this in a UX/UI Open Door so the update mobile behaviour is discussed and agreed upon (scheduled)
* [ ] Update LookBook docs (Parimal)
* [ ] Add code examples to LookBook docs (Henriette)
* [ ] Update component behaviour (Henriette)

#### **Where it's relevant**

* Project list

* Notification center

* Meetings mobile subheader

* Members list

* Administration settings:

* Users and Permissions → Users

* Authentication → OAuth Applications

* Authentication → SAML providers

* Authentication → OpenID providers

* Files → External files storages

* ...

* Notification center

* My Time tracker


#### **Why we need this**

**To avoid crowded/squished sub-headers like this in mobile:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:310px;" src="https://community.openproject.org/api/v3/attachments/264138/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:296px;" src="/api/v3/attachments/314831/content">

**And go towards cleaner sub-headers like:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:303px;" src="/api/v3/attachments/435314/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:306px;" src="/api/v3/attachments/435312/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:297px;" src="/api/v3/attachments/435315/content">