guide.deuxfleurs.fr/templates/_nav.html

{# (Public) Entrypoint to be used by zola "pages" #}
{% macro page(target) %}
  {% set root = get_section(path=target.ancestors | last) %}
  {{ nav::inner_nav(root=root, current=target) }}
{% endmacro %}

{# (Public) Entrypoint to be used by zola "sections" #}
{% macro section(target) %}
  {{ nav::inner_nav(root=target, current=target) }}
{% endmacro %}

{# -------------------------- #}

{# (Private) Shared+root logic to build the menu #}
{% macro inner_nav(root, current) %}
  {{ nav::hamburger(root=root) }}
  
  {# Section title #}
  <div class="toc-item toc-section">
    <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
  </div>

  {# Choose between "tree" (has extra.parent) and "list" (default) collections #}
  {% set root_tree = root.pages | group_by(attribute="extra.parent") %}
  {% if root.relative_path in root_tree %}
    {% set tree_breadcrumb = nav::breadcrumb(corpus=root.pages, root=root.relative_path, target=current)|split(pat=":")|slice(start=1) %}
    {{ nav::tree(
         tree=root_tree, 
         cursor=root.relative_path, 
         selected=current, 
         crumb=tree_breadcrumb) }}
  {% else %}
    {{ nav::list(list=root.pages, selected=current) }}
  {% endif %}   
{% endmacro %}

{# On small screens, like a smartphone, hide the menu behind an hamburger icon #}
{% macro hamburger(root) %}
  <input id="menu-toggle" type="checkbox" />
  <label class='menu-button-container' for="menu-toggle">
    <div class="menu-button"></div>
    <div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
  </label>
{% endmacro %}

{# Build a breadcrumb for the page #}
{# It's ugly because this is the hacky part of the project #}
{% macro breadcrumb(corpus, root, target) %}{% if 'parent' in target.extra and target.extra.parent != root %}{% set new_target = get_page(path=target.extra.parent) %}{{ nav::breadcrumb(corpus=corpus, root=root, target=new_target) }}:{{ new_target.relative_path }}{% endif %}{% endmacro %}

{% macro list(list, selected) %}
  {% for page in list %}
    {% set is_selected = page.relative_path == selected.relative_path %}
    <div class="toc-item">
      {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }}
    </div>
  {% endfor %}
{% endmacro %}

{# Tree menu rendering #}
{% macro tree(tree, cursor, selected, crumb) %}
  {% for page in tree | get(key=cursor) %}
  {% set is_selected = page.relative_path == selected.relative_path %}
  <div class="toc-item">

    {# LINK WITH SUBSECTION #}
    {% if page.relative_path in tree %}
      {{ nav::link(page=page, is_selected=is_selected, is_parent=true) }} 
      {% if page.relative_path in crumb or is_selected %}
        <div class="nav-subsection">
          {% set ncrumb = crumb | slice(start=1) %}
          {% set ncursor = page.relative_path %}
          {% if ncursor in tree %}
            {{ nav::tree(tree=tree, cursor=ncursor, selected=selected, crumb=ncrumb) }}
          {% endif %}
        </div>
      {% endif %}

    {# SIMPLE LINK #}
    {% else %}
      {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }}
    {% endif %}
  </div>
  {% endfor %}
{% endmacro %}

{% macro subsection() %}

{% endmacro %}

{% macro link(page, is_selected, is_parent) %}
  <a class="subtext" href="{{page.permalink | safe}}">
      {% if is_selected %}<b>{% endif %}
      {% if is_parent %}‣ {% endif %}
      {{ page.title }}
      {% if is_selected %}</b>{% endif %}
  </a>
{% endmacro %}