pages/_includes/header.liquid

<header>
  <!-- Nav Bar -->
  <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}" role="navigation">
    <div class="container">
      {% if page.permalink != '/' %}
        <a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl }}/">
          {% if site.title == 'blank' %}
            {% if site.first_name %}
              <span class="font-weight-bold">
                {{- site.first_name -}}
              </span>
            {% endif %}
            {% if site.middle_name %}
              {{- site.middle_name -}}
            {% endif %}
            {% if site.last_name %}
              {{- site.last_name -}}
            {% endif %}
          {% else %}
            {{- site.title -}}
          {% endif %}
        </a>
      {% elsif site.enable_navbar_social %}
        <!-- Social Icons -->
        <div class="navbar-brand social">{% social_links %}</div>
      {% endif %}
      <!-- Navbar Toggle -->
      <button
        class="navbar-toggler collapsed ml-auto"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>

      <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto flex-nowrap">
          {% for page in site.pages %}
            {% if page.permalink == '/' %} {% assign about_title = page.title %} {% endif %}
          {% endfor %}

          <!-- About -->
          <li class="nav-item {% if page.permalink == '/' %}active{% endif %}">
            <a class="nav-link" href="{{ '/' | relative_url }}">
              {{- about_title }}
              {% if page.permalink == '/' %}
                <span class="sr-only">(current)</span>
              {% endif %}
            </a>
          </li>

          <!-- Other pages -->
          {% assign sorted_pages = site.pages | sort: 'nav_order' %}
          {% for p in sorted_pages %}
            {% if p.nav and p.autogen == null %}
              {% if p.dropdown %}
                {% assign has_active_child = false %}
                {% for child in p.children %}
                  {% if page.title == child.title %}
                    {% assign has_active_child = true %}
                  {% endif %}
                {% endfor %}
                <li class="nav-item dropdown {% if page.title == p.title or has_active_child %}active{% endif %}">
                  <a
                    class="nav-link dropdown-toggle"
                    href="#"
                    id="navbarDropdown"
                    role="button"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    {{- p.title }}
                    {% if page.title == p.title or has_active_child %}
                      <span class="sr-only">(current)</span>
                    {% endif %}
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    {% for child in p.children %}
                      {% if child.title == 'divider' %}
                        <div class="dropdown-divider"></div>
                      {% else %}
                        <a
                          class="dropdown-item {% if page.title == child.title %}active{% endif %}"
                          href="{% if child.permalink contains '://' %}{{ child.permalink }}{% else %}{{ child.permalink | relative_url }}{% endif %}"
                        >
                          {{- child.title -}}
                        </a>
                      {% endif %}
                    {% endfor %}
                  </div>
                </li>
              {% else %}
                {% assign parent_link = p.permalink | remove: 'index.html' %}
                <li class="nav-item {% if page.url contains parent_link %}active{% endif %}">
                  {%- if p.permalink contains '://' -%}
                    {%- assign url = p.permalink -%}
                  {%- elsif p.permalink contains '/blog/' -%}
                    {%- assign url = '/blog/' -%}
                  {%- else -%}
                    {%- assign url = p.url -%}
                  {%- endif %}
                  <a class="nav-link" href="{{ url | relative_url }}">
                    {{- p.title }}
                    {% if page.url contains p.url %}
                      <span class="sr-only">(current)</span>
                    {% endif %}
                  </a>
                </li>
              {% endif %}
            {% endif %}
          {% endfor %}
          {% if site.search_enabled %}
            <!-- Search -->
            <li class="nav-item">
              <button id="search-toggle" title="Search" onclick="openSearchModal()">
                <span class="nav-link">ctrl k <i class="fa-solid fa-magnifying-glass"></i></span>
              </button>
            </li>
          {% endif %}
          {% if site.enable_darkmode %}
            <!-- Toogle theme mode -->
            <li class="toggle-container">
              <button id="light-toggle" title="Change theme">
                <i class="fa-half-sun-moon" id="light-toggle-system"></i>
                <i class="fa-solid fa-moon" id="light-toggle-dark"></i>
                <i class="fa-solid fa-sun" id="light-toggle-light"></i>
              </button>
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>
  {% if site.enable_progressbar %}
    <!-- Scrolling Progress Bar -->
    <progress id="progress" value="0">
      <div class="progress-container">
        <span class="progress-bar"></span>
      </div>
    </progress>
  {% endif %}
</header>