Newer
Older
# Header
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 search bar is hidden on the homepage that has its own search bar 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.
The search bar 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 search bar 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 search bar 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 search bar 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 search bar has a value, it is possible to reset the search by clicking the cross icon.
The search bar 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.
This button can have different behaviors. If the user is anonymous, a click will redirect to the login page. If the user is already authenticated, it opens a dropdown menu with three possible actions:
* access to the user profil page
* access to the user data accesses page