nav.html

<nav role="navigation" aria-label="Main navigation">
  <p>
    <button class="btn js-toggle-dark-mode">Switch to dark</button>
  </p>

  <script>
    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
    const cssFile = document.querySelector('[rel="stylesheet"]')
    const originalCssRef = cssFile.getAttribute('href')
    const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')

    addEvent(toggleDarkMode, 'click', function () {
      if (cssFile.getAttribute('href') === originalCssRef) {
        cssFile.setAttribute('href', darkModeCssRef)
      } else {
        cssFile.setAttribute('href', originalCssRef)
      }
    })
  </script>
  <ul class="navigation-list">
    {% assign pages_list = site.html_pages | sort:"nav_order" %}
    {% for node in pages_list %}
      {% unless node.nav_exclude %}
        {% if node.parent == nil %}
          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
            {% if page.parent == node.title or page.grand_parent == node.title %}
              {% assign first_level_url = node.url | absolute_url %}
            {% endif %}
            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
            {% if node.has_children %}
              {% assign children_list = site.html_pages | sort:"nav_order" %}
              <ul class="navigation-list-child-list ">
                {% for child in children_list %}
                  {% if child.parent == node.title %}
                    <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
                      {% if page.url == child.url or page.parent == child.title %}
                        {% assign second_level_url = child.url | absolute_url %}
                      {% endif %}
                      <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
                      {% if child.has_children %}
                        {% assign grand_children_list = site.html_pages | sort:"nav_order" %}
                        <ul class="navigation-list-child-list">
                          {% for grand_child in grand_children_list %}
                            {% if grand_child.parent == child.title %}
                              <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
                                <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
                              </li>
                            {% endif %}
                          {% endfor %}
                        </ul>
                      {% endif %}
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endif %}
      {% endunless %}
    {% endfor %}
  </ul>
</nav>