The header of the application has different display and content depending on two factors:
* the screen size (mobile, tablet or desktop)
* the current page, (homepage or any other pages)
The header background is `transparent` on the homepage.
The menu button which let the user hide or display the side menu always keep its left position.
The platform logo is almost always displayed, unless the current page is the homepage. It has a different version on mobile and is centered on mobile and tablet.
The searchbar is hidden on the homepage that has its own searchbar and on the mobile and tablet version because then it is located in the side menu.
The user button is always present but as a text (`Sign in` or user's `firstname`) when current page is the homepage.
The *Grand lyon* logo is only displayed on desktop version.
The feedback button is integrated to the header on mobile version only. It is also positioned at the level of the header when not on the homepage and not on mobile but it is only an absolute position.
## Searchbar
The searchbar allow a user to perform a multi-word search over dataset catalog. The search is performed over the metadata as well as the data.
With the searchbar comes an auto-complete functionality. As the user types, but with a debounce time of 500ms a request is made to the elasticsearch service in order to retrieve a maximum of 5 possible completions for the text the user as typed so far. In each of those completions, the part matching the user's text is bolded. Each completion is clickable which will then replace the current text of the searchbar and trigger the search action.
In order to trigger a search the user can either type the `Enter` button of its keyboard when the input of the searchbar is focused or click the magnifying glass icon.
The trigger of a search will not only perform a request to the elasticsearch service but also redirect the app the the `research` page if it wasn't the current page.
When the searchbar has a value, it is possible to reset the search by clicking the cross icon.
The searchbar supports advenced queries with `+` or `-` characters in order to make sure that both words are present in the result or instead to exclude the results with a particluar word.
## User button
This button can have different behaviors. If the user anonymous, a click will redirect to the login page. If the user is already authenticated it opens a dropdown menu with three possible actions:
