django-components/docs/overrides/partials/nav-item.html

{# This overrides the nav-item partial from mkdocs-material v9.6.17 #}
{# https://github.com/squidfunk/mkdocs-material/blob/c89a66bf39bb7f472e925753367ff8e464e0d683/src/templates/partials/nav-item.html #}
{# Majority of the file is the original, so our changes are highlighted #}
{# with `OUR CHANGES START` and `OUR CHANGES END` #}

<!-- Render navigation link status -->
{% macro render_status(nav_item, type) %}
  {% set class = "md-status md-status--" ~ type %}

  <!-- Render icon with title (or tooltip), if given -->
  {% if config.extra.status and config.extra.status[type] %}
    <span
      class="{{ class }}"
      title="{{ config.extra.status[type] }}"
    >
    </span>

  <!-- Render icon only -->
  {% else %}
    <span class="{{ class }}"></span>
  {% endif %}
{% endmacro %}

<!-- Render navigation link content -->
{% macro render_content(nav_item, ref) %}
  {% set ref = ref or nav_item %}

  <!-- Navigation link icon -->
  {% if nav_item.meta and nav_item.meta.icon %}
    {% include ".icons/" ~ nav_item.meta.icon ~ ".svg" %}
  {% endif %}

  <!-- ==================== OUR CHANGES START ==================== -->
  {# Insert line break between group name and title #}
  {# E.g. `Documentation: API Reference` -> `Documentation:<br>API Reference` #}
  {% if ": " in ref.title %}
    {% set parts = ref.title.split(": ", 1) %}
    {% set title = parts[0] ~ ":<br>" | safe ~ parts[1] %}
  {% else %}
    {% set title = ref.title %}
  {% endif %}
  <!-- ==================== OUR CHANGES END ==================== -->

  <!-- Navigation link title -->
  <span class="md-ellipsis">
    {{ title }}

    <!-- Navigation link subtitle -->
    {% if nav_item.meta and nav_item.meta.subtitle %}
      <br />
      <small>{{ nav_item.meta.subtitle }}</small>
    {% endif %}
  </span>

  <!-- Navigation link status -->
  {% if nav_item.meta and nav_item.meta.status %}
    {{ render_status(nav_item, nav_item.meta.status) }}
  {% endif %}
{% endmacro %}

<!-- Render navigation item (pruned) -->
{% macro render_pruned(nav_item, ref) %}
  {% set ref = ref or nav_item %}
  {% set first = nav_item.children | first %}

  <!-- Recurse, if the first item has further nested items -->
  {% if first and first.children %}
    {{ render_pruned(first, ref) }}

  <!-- Navigation link -->
  {% else %}
    <a href="{{ first.url | url }}" class="md-nav__link">
      {{ render_content(ref) }}

      <!-- Only render toggle if there's at least one nested item -->
      {% if nav_item.children | length > 0 %}
        <span class="md-nav__icon md-icon"></span>
      {% endif %}
    </a>
  {% endif %}
{% endmacro %}

<!-- Render navigation item -->
{% macro render(nav_item, path, level, parent) %}

  <!-- Determine classes -->
  {% set class = "md-nav__item" %}
  {% if nav_item.active %}
    {% set class = class ~ " md-nav__item--active" %}
  {% endif %}

  <!-- Determine active page for paginated views -->
  {% if nav_item.pages %}
    {% if page in nav_item.pages %}
      {% set nav_item = page %}
    {% endif %}
  {% endif %}

  <!-- Navigation item with nested items -->
  {% if nav_item.children %}

    <!-- Determine all nested items that are index pages -->
    {% set _ = namespace(index = none) %}
    {% if "navigation.indexes" in features %}
      {% for item in nav_item.children %}
        {% if item.is_index and _.index is none %}
          {% set _.index = item %}
        {% endif %}
      {% endfor %}
    {% endif %}
    {% set index = _.index %}

    <!-- Navigation tabs -->
    {% if "navigation.tabs" in features %}

      <!-- Render 1st level active item as section -->
      {% if level == 1 and nav_item.active %}
        {% set class = class ~ " md-nav__item--section" %}
        {% set is_section = true %}
      {% endif %}

      <!-- Navigation tabs + sections -->
      {% if "navigation.sections" in features %}

        <!-- Render 2nd level items with nested items as sections -->
        {% if level == 2 and parent.active %}
          {% set class = class ~ " md-nav__item--section" %}
          {% set is_section = true %}
        {% endif %}
      {% endif %}

    <!-- Navigation sections -->
    {% elif "navigation.sections" in features %}

      <!-- Render 1st level items with nested items as sections -->
      {% if level == 1 %}
        {% set class = class ~ " md-nav__item--section" %}
        {% set is_section = true %}
      {% endif %}
    {% endif %}

    <!-- Navigation pruning -->
    {% if "navigation.prune" in features %}

      <!-- Prune item if it is not a section and not active -->
      {% if not is_section and not nav_item.active %}
        {% set class = class ~ " md-nav__item--pruned" %}
        {% set is_pruned = true %}
      {% endif %}
    {% endif %}

    <!-- Nested navigation item -->
    <li class="{{ class }} md-nav__item--nested">
      {% if not is_pruned %}
        {% set checked = "checked" if nav_item.active %}

        <!-- Determine checked and indeterminate state -->
        {% if "navigation.expand" in features and not checked %}
          {% set indeterminate = "md-toggle--indeterminate" %}
        {% endif %}

        <!-- Active checkbox expands items contained within nested section -->
        <input
          class="md-nav__toggle md-toggle {{ indeterminate }}"
          type="checkbox"
          id="{{ path }}"
          {{ checked }}
        />

        <!-- Toggle to expand nested items -->
        {% if not index %}
          {% set tabindex = "0" if not is_section %}
          <label
            class="md-nav__link"
            for="{{ path }}"
            id="{{ path }}_label"
            tabindex="{{ tabindex }}"
          >
            {{ render_content(nav_item) }}
            <span class="md-nav__icon md-icon"></span>
          </label>

        <!-- Toggle to expand nested items with link to index page -->
        {% else %}
          {% set class = "md-nav__link--active" if index == page %}
          <div class="md-nav__link md-nav__container">
            <a
              href="{{ index.url | url }}"
              class="md-nav__link {{ class }}"
            >
              {{ render_content(index, nav_item) }}
            </a>

            <!-- Only render toggle if there's at least one more page -->
            {% if nav_item.children | length > 1 %}
              {% set tabindex = "0" if not is_section %}
              <label
                class="md-nav__link {{ class }}"
                for="{{ path }}"
                id="{{ path }}_label"
                tabindex="{{ tabindex }}"
              >
                <span class="md-nav__icon md-icon"></span>
              </label>
            {% endif %}
          </div>
        {% endif %}

        <!-- Nested navigation -->
        <nav
          class="md-nav"
          data-md-level="{{ level }}"
          aria-labelledby="{{ path }}_label"
          aria-expanded="{{ nav_item.active | tojson }}"
        >
          <label class="md-nav__title" for="{{ path }}">
            <span class="md-nav__icon md-icon"></span>
            {{ nav_item.title }}
          </label>
          <ul class="md-nav__list" data-md-scrollfix>

            <!-- Nested navigation item -->
            {% for item in nav_item.children %}
              {% if not index or item != index %}
                {{ render(item, path ~ "_" ~ loop.index, level + 1, nav_item) }}
              {% endif %}
            {% endfor %}
          </ul>
        </nav>

      <!-- Pruned navigation item -->
      {% else %}
        {{ render_pruned(nav_item) }}
      {% endif %}
    </li>

  <!-- Currently active page -->
  {% elif nav_item == page %}
    <li class="{{ class }}">
      {% set toc = page.toc %}

      <!-- State toggle -->
      <input
        class="md-nav__toggle md-toggle"
        type="checkbox"
        id="__toc"
      />

      <!-- Hack: see partials/toc.html for more information -->
      {% set first = toc | first %}
      {% if first and first.level == 1 %}
        {% set toc = first.children %}
      {% endif %}

      <!-- Navigation link to table of contents -->
      {% if toc %}
        <label class="md-nav__link md-nav__link--active" for="__toc">
          {{ render_content(nav_item) }}
          <span class="md-nav__icon md-icon"></span>
        </label>
      {% endif %}
      <a
        href="{{ nav_item.url | url }}"
        class="md-nav__link md-nav__link--active"
      >
        {{ render_content(nav_item) }}
      </a>

      <!-- Table of contents -->
      {% if toc %}
        {% include "partials/toc.html" %}
      {% endif %}
    </li>

  <!-- Navigation item -->
  {% else %}
    <li class="{{ class }}">
      <a href="{{ nav_item.url | url }}" class="md-nav__link">
        {{ render_content(nav_item) }}
      </a>
    </li>
  {% endif %}
{% endmacro %}