Add breadcrumb navigation and enhance button functionality

_includes/footer.html

@@ -9,4 +9,12 @@
     var sidenavElems = document.querySelectorAll('.sidenav');
     var sidenavInstances = M.Sidenav.init(sidenavElems, {});
   });
+
+  document.querySelectorAll("button").forEach(button => {
+    const href = button.getAttribute("data-href");
+    if (!href) return;
+    button.addEventListener("click", () => {
+        window.location.href = button.getAttribute("data-href");
+    });
+  });
 </script>

_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>

_layouts/home.html

@@ -7,7 +7,11 @@ layout: default
     <h1 class="cyber-h" style="margin-bottom: 0;"><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
     <p style="margin-top: 0;"><small>{{ post.date | date: "%d.%m.%Y" }}</small></p>
     <p>{{ post.excerpt }}</p>
-    <a href="{{ post.url | relative_url }}">Weiterlesen...</a>
+    <button class="cyber-button bg-red fg-white m-2 vt-bot" data-href="{{ post.url | relative_url }}">
+      Weiterlesen...
+      <span class="glitchtext">$_glitch;</span>
+      <span class="tag"></span>
+    </button>
   </article>
   <hr>
 {% endfor %}

_sass/_layout.scss

@@ -4,9 +4,24 @@ body {
 }
 
 main {
-  height: calc(100vh - 124px);
+  height: calc(100vh - 180px);
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
+.breadcrumb {
+  font-size: 14px;
+  color: #ffcc00;
+  padding: 5px 10px;
+}
+
+.breadcrumb a {
+  color: #ff003c;
+  text-decoration: none;
+}
+
+.breadcrumb span {
+  color: #888;
+}