From 1fd89c29dca714c6e34df5f914471f8424143a26 Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Thu, 18 Apr 2024 13:55:45 +0800
Subject: [PATCH] Use block and extends for navbar

---
 src/_includes/global/navbar.njk | 69 ++++++++++++++++++++++++++
 src/_includes/main/navbar.njk   | 86 +++++----------------------------
 2 files changed, 81 insertions(+), 74 deletions(-)
 create mode 100644 src/_includes/global/navbar.njk

diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
new file mode 100644
index 00000000..deb83573
--- /dev/null
+++ b/src/_includes/global/navbar.njk
@@ -0,0 +1,69 @@
+<nav class="navbar">
+    <ul class="nav__menu">
+        {% block navbarLinks %}
+            {{ navbarLinks }}
+        {% endblock %}
+    </ul>
+</nav>
+
+<style>
+    .navbar {
+        background: var(--clr-navbar-bg);
+        padding: 0 0.6rem;
+        width: 100%;
+        z-index: 999;
+    }
+
+    .navbar a {
+        color: var(--clr-navbar-link);
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .navbar a:hover {
+        color: var(--clr-link-hover);
+    }
+
+    .navbar a:focus {
+        outline-offset: 0.3em;
+        outline: 0.15em solid var(--clr-navbar-link);
+    }
+
+    .nav__menu {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    /* Added to the navbar with JS when it reaches its scroll position */
+    .nav--sticky {
+        position: fixed;
+        width: 100%;
+        top: 0;
+    }
+
+    /* Add some top padding to the page content to prevent sudden quick movement
+    as the navigation bar gets a new position at the top of the page
+    (position:fixed and top:0) */
+    .nav--sticky + main {
+        padding-top: 2rem;
+    }
+</style>
+
+<script defer>
+    // Make the navigation bar sticky
+    // const hero = document.querySelector(".hero");
+    const navbar = document.querySelector(".navbar");
+    window.addEventListener("scroll", () => {
+        const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+        const stickyLine = hero.scrollHeight - navbar.scrollHeight;
+        if (scrollPosition > stickyLine + 55) {
+            navbar.classList.add("nav--sticky");
+        } else {
+            navbar.classList.remove("nav--sticky");
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/_includes/main/navbar.njk b/src/_includes/main/navbar.njk
index eb99f205..3a4c718f 100644
--- a/src/_includes/main/navbar.njk
+++ b/src/_includes/main/navbar.njk
@@ -1,75 +1,13 @@
-<nav class="navbar">
-    <ul class="nav__menu">
-        {% set currentUrl %}{{ page.url }}{% endset %}
-        {% for page in collections.pages %}
-            <li>
-                <a href="{{ page.url }}" {% if currentUrl === page.url %}aria-current="page"{% endif %}>
-                    {{ page.data.title or page.data.metadata.title }}
-                </a>
-            </li>
-        {%- endfor %}
-        <li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
-    </ul>
-</nav>
+{% extends "global/navbar.njk" %}
 
-<style>
-    .navbar {
-        background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
-        width: 100%;
-        z-index: 999;
-    }
-
-    .navbar a {
-        color: var(--clr-navbar-link);
-        text-decoration: none;
-        cursor: pointer;
-    }
-
-    .navbar a:hover {
-        color: var(--clr-link-hover);
-    }
-
-    .navbar a:focus {
-        outline-offset: 0.3em;
-        outline: 0.15em solid var(--clr-navbar-link);
-    }
-
-    .nav__menu {
-        list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-
-    /* Added to the navbar with JS when it reaches its scroll position */
-    .nav--sticky {
-        position: fixed;
-        width: 100%;
-        top: 0;
-    }
-
-    /* Add some top padding to the page content to prevent sudden quick movement
-    as the navigation bar gets a new position at the top of the page
-    (position:fixed and top:0) */
-    .nav--sticky + main {
-        padding-top: 2rem;
-    }
-</style>
-
-<script defer>
-    // Make the navigation bar sticky
-    // const hero = document.querySelector(".hero");
-    const navbar = document.querySelector(".navbar");
-    window.addEventListener("scroll", () => {
-        const scrollPosition = window.scrollY || document.documentElement.scrollTop;
-        const stickyLine = hero.scrollHeight - navbar.scrollHeight;
-        if (scrollPosition > stickyLine + 55) {
-            navbar.classList.add("nav--sticky");
-        } else {
-            navbar.classList.remove("nav--sticky");
-        }
-    });
-</script>
\ No newline at end of file
+{% block navbarLinks %}
+    {% set currentUrl %}{{ page.url }}{% endset %}
+    {% for page in collections.pages %}
+        <li>
+            <a href="{{ page.url }}" {% if currentUrl === page.url %}aria-current="page"{% endif %}>
+                {{ page.data.title or page.data.metadata.title }}
+            </a>
+        </li>
+    {%- endfor %}
+    <li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
+{% endblock %}
\ No newline at end of file