clientside-view-responsive-header

This module utilizes the [clientside-require] and [clientside-view-loader] modules (found on NPM) to make it easy to create a stylish and responsive header.

The header expects a structured JSON object to be passed to it, from which it will build the header. The dom that the module produces automatically listens for the window to resize and updates how many elements can be displayed or must be put in the "menu" dropdown based on the window size.

visual demo

!clientside-view-responsive-header_demo

$3

the following JSON:
``
{
"left" : [
{
"description" : "go to home page",
"html" : "",
"src" : "/path/to/home.html"
}
],
"right" : [
{
"title" : "Blog",
"src" : "/path/to/blog.html"
},
{
"html" : "Login",
"src" : "/path/to/loginpage.html"
}
]
}

`
creates this result:
!screenshot_2018-05-16_13-38-24




$3


please see the demo directory for more examples and usage documentation

Additional Functionality

Each element is provided with a hide() and remove() method. By retreiving the DOM node of a .header_element, you can hide the element from the header dynamically with the hide() method. The hide() method will ensure that the dropdowns reflect whether they have children left or not and that the responsive wrapping functionality is not broken.

For example:

`
document.querySelector(".header_element#identifier_for_target_element").hide();
`
or
`
document.getElementById("identifier_for_target_element").hide()
``