{% props id: String, label: String, menus: Vec<(String, Vec<(String, String, String)>)> %}
{#- menus: (title, items); each item (text, href, shortcut), or text "-" for a separator. Each menu is a popover its trigger opens. -#}
<div class="ui-menubar" role="menubar" aria-label="{{ label }}" data-ui="menubar">
{%- for (i, (title, _)) in menus.iter().enumerate() %}
<button class="ui-menubar-trigger" type="button" role="menuitem" aria-haspopup="menu" popovertarget="{{ id }}-{{ i }}">{{ title }}</button>
{%- end %}
</div>
{%- for (i, (title, items)) in menus.iter().enumerate() %}
<div class="ui-menu" id="{{ id }}-{{ i }}" popover role="menu" aria-label="{{ title }}">
{%- for (text, href, shortcut) in items.iter() %}
{%- if text == "-" %}
<div class="ui-menu-sep" role="separator"></div>
{%- else %}
<a class="ui-menu-item" role="menuitem" href="{{ href }}">{{ text }}{% if !shortcut.is_empty() %}<span class="ui-menu-shortcut">{{ shortcut }}</span>{% end %}</a>
{%- end %}
{%- end %}
</div>
{%- end %}