The menu editor gets "Als Button darstellen" per entry: shape, appearance and size from the button design, fill and ink with hover and palette, icon colour, icon from the dialog, motion, icon-only and where the button sits on the phone (in the opened menu, beside the burger, or there as an icon only). Colours go into the page stylesheet under a stable per-button id because the CSP forbids inline styles. ADR 110. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
21 lines
1.3 KiB
Twig
21 lines
1.3 KiB
Twig
{# One level of a resolved menu. Dropdowns use details/summary so submenus work without JavaScript. #}
|
|
<ul class="menu-list menu-level-{{ level|default(1) }}">
|
|
{% for link in links %}
|
|
<li{% if link.button is defined %} class="menu-item-button{{ link.button.mobile|default('menu') in ['bar', 'bar-icon'] ? ' menu-keep-visible' }}"{% endif %}>
|
|
{% if link.button is defined %}
|
|
{% include 'menu-button.html.twig' with {link: link} only %}
|
|
{% elseif link.children is not empty %}
|
|
<details class="menu-branch">
|
|
<summary>{% include 'nav-label.html.twig' with {link: link} only %}</summary>
|
|
<div class="menu-branch-body">
|
|
<a href="{{ link.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: link.newTab|default(false)} only %}{% if link.current %} aria-current="page"{% endif %}>{% include 'nav-label.html.twig' with {link: link} only %}</a>
|
|
{% include 'nav.html.twig' with {links: link.children, level: (level|default(1)) + 1} only %}
|
|
</div>
|
|
</details>
|
|
{% else %}
|
|
<a href="{{ link.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: link.newTab|default(false)} only %}{% if link.current %} aria-current="page"{% endif %}>{% include 'nav-label.html.twig' with {link: link} only %}</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|