{% assign menu_pages = site.pages | where_exp: "page", "page.path contains 'pages/'" %}
{% assign sorted_pages = menu_pages | sort: "weight" %}
<header>
  <nav class="cyber-razor-bottom bg-black">
    <div class="nav-wrapper">
      <a href="{{ "/" | relative_url }}" class="cyberpunk-font-og f-x2-5">{{ site.title }}</a>
      <a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="{{ "/" | relative_url }}" class="cyber-a">Home</a></li>        
        {% for page in sorted_pages %}
          {% if page.title and page.permalink and page.nav != false %}
            <li><a href="{{ page.url | relative_url }}" class="cyber-a">{{ page.title }}</a></li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
    <ul class="sidenav" id="mobile-menu">
      <li>
        <button class="cyber-button bg-red fg-white m-2 vt-bot" data-href="{{ "/" | relative_url }}">
          Home
        </button>
      </li>
      {% for page in sorted_pages %}
        {% if page.title and page.permalink and page.nav != false %}
          <li>
            <button class="cyber-button bg-red fg-white m-2 vt-bot" data-href="{{ page.url | relative_url }}">
              {{ page.title }}
              <span class="glitchtext">$_glitch;</span>
              <span class="tag"></span>
            </button>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </nav>

  <!-- Breadcrumb -->
  <div class="cyber-att">
    <a href="{{ "/" | relative_url }}">Home</a>

    {% assign segments = page.url | split: "/" %}
    {% assign path = "" %}

    {% for segment in segments offset: 1 %}
      {% assign path = path | append: "/" | append: segment %}
      {% assign breadcrumb_page = site.pages | where: "url", path | first %}

      {% if breadcrumb_page and breadcrumb_page.title %}
        › <a href="{{ path | relative_url }}">{{ breadcrumb_page.title }}</a>
      {% else %}
        › <span>{{ segment }}</span>
      {% endif %}
    {% endfor %}
  </div>
</header>