Nuropa: Toolbar

The Nuropa template features a global toolbar at the top of the page, which combines all the relevant tools and site info in one place.

See the following screenshot for a quick preview:

The toolbar has two main section, each with different tools and purposes:

1. The user-configurable section on the left-hand side contains:
   • Two hooks for importing static snippets (here shown as red “pre” and “post” blocks)
   • A configurable tool, which can show either:
     • The user information menu (or the “Log in” button if no user is logged in, as in the example above)
     • The translations menu, if the Translation plugin is installed.
2. The tools list, showing a dynamic list of available page or site tools
   • An overflow menu (shown as »), that shows tools for which there was not enough space in the menu.

You can use these example files as starting points for your own include hooks. To use them, simply download these and place them into your /conf/ directory:

This include file adds a custom menu to the toolbar which links to other web sites:

toolbar-pre.html

<!-- BEGIN Included file: toolbar-pre.html -->
<button popovertarget="tp__pre__menu">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8,10V13H14V18H8V21L2,15.5L8,10M22,8.5L16,3V6H10V11H16V14L22,8.5Z" /></svg>
  <span>My other sites</span>
</button>
<div id="tp__pre__menu" popover>
  <ul>
    <li><a href="https://first-site.org/">First site</a></li>
    <li><a href="https://second-site.org/">Second site</a></li>
  </ul>
</div>
<!-- END OF toolbar-pre.html -->

This will show in the toolbar as follows:

• The file name toolbar-pre.html indicates it should be inserted before the right-hand tool (use toolbar-post.html to insert after the tool).
• The comment lines (<!– … –>) at the beginning and the end are not strictly necessary, but can help you to understand where specific sections of the page code come from, in case there are problems.
• The <button> element is the part of the widget that will be initially visible in the toolbar. The attribute popovertarget must refer to the actual menu element (see below).
  The button element contains:
  • An <svg> icon (optional)
  • A <span> element to contain the actual text (alternatively, consider using e.g. <b> instead).
• The actual menu is implemented as a <div> (alternatively, using consider e.g. <nav> instead)
  • This element must have a unique id. It is recommended that this includes at least one double-underscore in order to avoid possible conflics with the content sections. This ID must be referenced in the button’s popovertarget attribute (see above)
  • This element also must have a popover attribute!
  • The menu element can have any content. The example code contains a list of two links to external sites.