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.

defnavbar-item

(defnavbar-item & {:keys [type title classes href id contents selectable icon-data is-hoverable], :or {type :a, id (keyword (gensym "nav-")), selectable true}})

Define navbar entry item map. Supported keys are

Key Description
:type the entry type. See below for possible values.
Defaults to :a
:title The item title to appear in the navbar
:class a string or vector of strings specifying CSS class
names
:href hypertext url for :a items. Defaults to #
:id Add an id attribute to this item. Defaults to nav-<n>
where <n> is a unique value
:contents the actual item contents
:icon-data An icon data map (see theophilusx.yorick.icons)
:selectable determines if the item has a click handler attached.
Defaults to true.
:is-hoverable for dropdown menus determines if the menu will dropdown
when mouse hovers over

Possible values for the :type key are

Value Description
:a A plain anchor based menu item
:div A basic div element e.g. arbitrary content wrapped in a div
:dropdown A dropdown menu element
:raw A raw element. Just used ‘as-is’.
:divider A horizontal divider used in dropdown menus

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.

menu

(menu model)

Generate the navbar menus. The model argument is a reagent atom used as the document model store. It is a map which contains the definitions for the navbar menu. The following keys are supported in the map

Key Description
:burger-active Current state of the burger element
:sid Storage identifier keyword used for this navbar
:menus Vector of menu definition maps (see defnavbar-item)
:end-menu Vector of menu definition maps (see defnavbar-item)

navbar

(navbar nb-def)

Define an application navbar. The nb-def argument is a map which can have the following keys:

Key Description
:sid A storage identifier keyword e.g :topbar or :top.bar
:spaced adds additional space above, below and to left and right
:colour set the colour for the navbar. Possible values are
:is-primary, :is-link, :is-info, :is-success,
:is-warning, :is-danger, :is-black, :is-dark
:is-light and :is-white
:transparent if true, remove hover and active background effects from
the navbar
:burger true if navabar should include a ‘burger’ menu.
Defaault true
:class additional class attributes to be added to main nav tag
:default-link the default (active) link set when navbar first loaded
:brand Brand definition (use defnavbar-item to define)
:menus the navbar menus = vector of defnavbar-item items
:end-menus vector of menus to be added after main menus i.e. to
the right

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."`