<%# Popover menu: pure
/, zero-JS. Mirrors html-css-foundation .menu. Config: trigger { class?(="btn", "" ⇒ none) · label?(aria-label) · icon? · text? · html?(raw inner, wins) } align? "left" left-align the popover (default right) up? boolean open upward (footer menus) open? boolean start open kebab? boolean bare kebab trigger (adds .kebab) width? number|string popover min-width (number ⇒ px) items: Item[] popover content, top→bottom Item ∈ { head } · { sep } · { label, icon?, href? ⇒ , danger? } (default: menu-item button) · { group: { legend?, name, control?(="checkbox"|"radio"), options:{value,label,checked?}[] } } %><% const t = locals.trigger || {}; const sumCls = "class" in t ? t.class : "btn"; const items = locals.items || []; const popCls = "menu-pop" + (locals.align === "left" ? " left" : "") + (locals.up ? " up" : ""); const width = locals.width; -%>
"<%= locals.open ? " open" : "" %>> class="<%= sumCls %>"<% } %><% if (t.label) { %> aria-label="<%= t.label %>"<% } %>><% if (t.html != null) { %><%- t.html %><% } else { if (t.icon) { %><% } if (t.text) { %><%= t.text %><% } } %>
style="min-width:<%= typeof width === "number" ? width + "px" : width %>"<% } %>> <% items.forEach((it) => { -%> <% if (it.head != null) { -%>
<%= it.head %>
<% } else if (it.sep) { -%>
<% } else if (it.group) { const g = it.group; -%>
<% if (g.legend) { %><%= g.legend %><% } %><% g.options.forEach((o) => { %><% }) %>
<% } else if (it.href) { -%> " href="<%= it.href %>"><% if (it.icon) { %><% } %><%= it.label %> <% } else { -%> <% } -%> <% }) -%>