Add breadcrumb navigation and enhance button functionality

_includes/header.html

@@ -16,14 +16,14 @@
     </div>
     <ul class="sidenav" id="mobile-menu">
       <li>
-        <button class="cyber-button bg-red fg-white m-2 vt-bot">
+        <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">
+            <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>
@@ -33,4 +33,23 @@
       {% 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>