theophilusx.yorick.navbar
Provides components and supporting functions for a navigation bar.
active?
(active? model id)Returns true if id is the value of the key :active-state in the atom specified by model.
brand
(brand model)Generate a brand component for the navbar. The model argument is a reagent atom used as the document model store and for the data items required to define the brand component. The following keys are expected to exist in the atom: :brand and :has-burger.
burger
(burger model)Generate a burger menu for mobile devices to allow for expansion of the navbar on small screens. The model argument is a reagent atom to be used as the document model store for tracking state. The :sid key from the model atom is used to determine the HTML data-target attribute.
dropdown-active?
(dropdown-active? model id)Returns true if value of :active-dropdown in atom model is equal to id.
item-a
(item-a a model)Create a navbar anchor component from the map a. The model is the atom used as the document model store. The map can have the following keys:
| Keyword | Description | | :icon-data | An icon data map (see theophilusx.yorick.icon for details)| | :contents | The link title contents | | :class | a string or vector of strings specifying CSS class names to | | | be associated with the anchor | | :href | A href value to be used by the anchor | | :selectable| If true, a click handler will be associated with the link, | | | making the item selectable in the navbar |
item-div
(item-div d model)This function generates a div component which contains sub-components built from the contents of the :contents key in the map d. The model argument is a reagent atom to be used as the document model store for tracking the state of the enclosed components. The following keys are recognised in the map d:
| Keyword | Description |
|---|---|
:class |
a string or vector of strings specifying CSS class names |
to be added to the outer div |
|
:contents |
A vector of navbar item maps. See below for definition of |
| these maps |
item-dropdown
(item-dropdown d model)Generates a dropdown menu component. The d argument is a map which defines the dropdown menu. The model argument is a reagent atom used as the document model store for tracking state. The following keys are used from the d map:
| Keyword | Description |
|---|---|
:id |
The HTML id attribute associated with the dropdown menu |
:title |
The title for the dropdown menu |
:contents |
A vector of navbar item definition maps. See below |
item-raw
(item-raw r _)A generic item which is just wrapped in a plain div. The r argument is a map with supported keys :class, a string or vector of strings containing CSS class names and :content, the content to put inside the div. No additional classes are added to the div apart from content. No click handler is associated with the component.
make-item
(make-item i model)Dispatcher function which calls appropriate generator helper function based on the :type key in the i map. The model argument is a reagent atom to be used as the document model store for tracking state changes. See the defnavbar-item function below for details on the keys supported in navbar item maps.
set-active
(set-active model & id)Set the value of :active-state in the atom state to id or nil if id is not supplied.
set-choice
(set-choice sid & id)Set the value of the key specified by storage identifier keyword sid to the value of id in the global state atom.
toggle-dropdown
(toggle-dropdown model & id)If id is nil, set :active-dropdown in atom model to nil, otherwise set :active-dropdown to nil if id equals current value or to value of id otherwise."`