75 lines
2.5 KiB
HTML
75 lines
2.5 KiB
HTML
{#-
|
|
Custom tabs partial — adds dropdown menus for sections with children.
|
|
|
|
For top-level nav items that have children (Development, Reference, ADRs),
|
|
a hover-activated dropdown lists all child pages. Single-page tabs
|
|
(Specification, Timeline, FAQ) render as plain links.
|
|
|
|
Replaces the default Material tabs.html + tabs-item.html.
|
|
-#}
|
|
|
|
{#- Recursive macro: drill to the first leaf page in a section tree. -#}
|
|
{% macro first_leaf_url(nav_item) %}
|
|
{% if nav_item.children %}
|
|
{% set first = nav_item.children | first %}
|
|
{{ first_leaf_url(first) }}
|
|
{% else %}
|
|
{{ nav_item.url | url }}
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{#- Recursive helper: collect all leaf pages under a section. -#}
|
|
{% macro render_dropdown_items(children) %}
|
|
{% for child in children %}
|
|
{% if child.children %}
|
|
{#- Nested section — render a group label + its children -#}
|
|
<li class="md-tabs__dropdown-group">
|
|
<span class="md-tabs__dropdown-label">{{ child.title }}</span>
|
|
<ul>
|
|
{{ render_dropdown_items(child.children) }}
|
|
</ul>
|
|
</li>
|
|
{% else %}
|
|
<li>
|
|
<a href="{{ child.url | url }}" class="md-tabs__dropdown-link{% if child == page %} md-tabs__dropdown-link--active{% endif %}">
|
|
{{ child.title }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endmacro %}
|
|
|
|
<nav class="md-tabs" aria-label="{{ lang.t('tabs') }}" data-md-component="tabs">
|
|
<div class="md-grid">
|
|
<ul class="md-tabs__list">
|
|
{% for nav_item in nav.items %}
|
|
{% set class = "md-tabs__item" %}
|
|
{% if nav_item.active %}
|
|
{% set class = class ~ " md-tabs__item--active" %}
|
|
{% endif %}
|
|
|
|
{% if nav_item.children %}
|
|
{#- Section with children — render tab + dropdown -#}
|
|
{% set class = class ~ " md-tabs__item--dropdown" %}
|
|
<li class="{{ class }}">
|
|
<a href="{{ first_leaf_url(nav_item) | trim }}" class="md-tabs__link">
|
|
{{ nav_item.title }}
|
|
<span class="md-tabs__dropdown-caret"></span>
|
|
</a>
|
|
<ul class="md-tabs__dropdown">
|
|
{{ render_dropdown_items(nav_item.children) }}
|
|
</ul>
|
|
</li>
|
|
{% else %}
|
|
{#- Single page — plain tab link -#}
|
|
<li class="{{ class }}">
|
|
<a href="{{ nav_item.url | url }}" class="md-tabs__link">
|
|
{{ nav_item.title }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</nav>
|