App header
==========
The *app header* is always attached to the top of the app and shows information
about the app or site such as its logo, name and user information.
Props
-----
#. ``mode``
:Type:
``enum (string)``
:Default:
``site``
:Description:
| defines if ``AppHeader`` should display app-related branding or
site-related branding
| **Enums:** ``site``, ``app``
#. ``appName``
:Type:
``string``
:Conditions for use:
prop ``mode`` has value ``app``
:Default:
**\*required**
:Description:
| used to get corresponding assets and app ``baseUrl`` from backend as
well as frontend configs
| Note: **NOT** ``appVerboseName``
#. ``sidebarButton``
:Type:
``Boolean``
:Default:
``false``
:Description:
| whether to display sidebar button to the left of the logo
#. ``sideBarVisibility``
:Type:
``Boolean``
:Conditions for use:
prop ``sideBarButton`` has value ``true``
:Default:
``false``
:Description:
| whether the sidebar is opened (visible, ``true``) or closed (hidden,
``false``)
#. ``onSidebarClick``
:Type:
``function()``
:Conditions for use:
prop ``sideBarButton`` has value ``true``
:Default:
``null``
:Description:
| the function that will be called when sidebar button is clicked
#. ``hamburgerOptions``
:Type:
``[string]``
:Conditions for use:
prop ``sideBarButton`` has value ``true``
:Default:
.. code-block:: javascript
[
'hamburger--minus',
'hamburger--spin',
'hamburger--squeeze'
]
:Description:
| types of hamburger animations
| Accepts any subset of the default list
| For more information, `click here `_
#. ``userDropdown``
:Type:
``Boolean``
:Default:
``false``
:Description:
| whether to display sign in button or user details and notification bell
| Displays institute logo, wordmark or name depending on availability
#. ``middle``
:Type:
````
:Default:
``null``
:Description:
| element, if any, to be rendered in the middle of the header
#. ``right``
:Type:
````
:Default:
``null``
:Description:
| element, if any, to be rendered on the right side of the header
Example usage
-------------
.. code-block:: javascript
import { AppHeader } from 'formula_one'
Importing ``AppHeader`` from ``formula_one``
.. code-block:: javascript
const hamburgerOptions = [
'hamburger--minus',
'hamburger--spin'
]
Defining an array of strings to pass in ``hamburgerOptions``
.. code-block:: jsx
Using ``AppHeader`` in ``app`` mode
It will render page title, favicon, app name and app logo by querying the
backend and handling all possible cases to render the best possible assets with
a user dropdown or 'Login' button based on whether a user is logged in.
.. code-block:: jsx
Using ``AppHeader`` in ``site`` mode
It will render site page title, site favicon, site name and site logo by
querying the backend and handling all possible cases to render the best possible
assets with a user dropdown or 'Login' button based on whether a user is logged
in. .. code-block:: jsx
Using ``AppHeader`` with absolutely no props
It will render the header in ``site`` mode and the institute logo in place of
the user dropdown.