From 366ff401cdd432bab174f391648e579de8774095 Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Sat, 8 Jun 2024 00:17:59 +0800
Subject: [PATCH] Restore navigation toggle to button element and add
 aria-expanded attribute toggle

---
 src/_includes/global/navbar.njk        | 47 +++++++++++++++++++-------
 src/changelogs/logs/2024/2024-06-07.md |  3 +-
 src/statements/colophon.md             |  1 +
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index c0503e74..da709c16 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -1,9 +1,8 @@
 <nav class="navbar">
-    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
-    <label for="nav-toggle" aria-label="Navigation menu toggle" class="navbar__control">
-        ☰ <span aria-hidden="true">Navigation</span>
-    </label>
-    <h2 class="visually-hidden">Navigation Manu</h2>
+    <button class="navbar__toggle" aria-label="Navigation menu toggle" aria-expanded="false">
+        <span aria-hidden="true">☰</span>
+        <h2 class="navbar__title">Navigation</h2>
+    </button>
     <ul class="navbar__links">
         {% block navbarLinks %}
             {{ navbarLinks }}
@@ -21,19 +20,25 @@
         top: 0;
     }
 
-    .navbar__control {
+    .navbar__toggle,
+    .navbar__title {
+        color: var(--clr-navbar-link);
         font-size: 1.3rem;
-        font-weight: 700;
     }
 
-    .navbar__control:hover{
-        cursor: pointer;
+    .navbar__toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.3em;
+        border: none;
+        padding: 0;
+        margin: 0;
+        background-color: inherit;
     }
 
-    #nav-toggle:focus + .navbar__control,
+    .navbar__toggle:focus,
     .navbar a:focus {
         outline: 0.15em solid var(--clr-navbar-link);
-        outline-offset: 0.1em;
     }
 
     .navbar a {
@@ -58,7 +63,7 @@
         overflow: auto;
     }
 
-    #nav-toggle:checked ~ .navbar__links {
+    .navbar__links--show {
         display: grid;
     }
 
@@ -68,7 +73,7 @@
             padding: 0 0.6em;
         }
 
-        .navbar__control {
+        .navbar__toggle {
             display: none;
         }
 
@@ -82,3 +87,19 @@
         }
     }
 </style>
+
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        const showClass = "navbar__links--show";
+        navbarLinks.classList.toggle(showClass);
+
+        if (navbarLinks.classList.contains(showClass)) {
+            navbarToggle.setAttribute("aria-expanded", "true");
+        } else {
+            navbarToggle.setAttribute("aria-expanded", "false");
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/changelogs/logs/2024/2024-06-07.md b/src/changelogs/logs/2024/2024-06-07.md
index 61ca832a..495f1d00 100644
--- a/src/changelogs/logs/2024/2024-06-07.md
+++ b/src/changelogs/logs/2024/2024-06-07.md
@@ -3,5 +3,4 @@ date: 2024-06-07
 ---
 
 * Update Leilukin's Hub's site button. This time, I made my site button myself by using Adobe Photoshop CS5.
-* Add a [colophon page](/colophon).
-* JavaScript is no longer needed for the navigation bar toggle button when the site is viewed on a mobile device.
\ No newline at end of file
+* Add a [colophon page](/colophon).
\ No newline at end of file
diff --git a/src/statements/colophon.md b/src/statements/colophon.md
index ed94ac50..b3229c5c 100644
--- a/src/statements/colophon.md
+++ b/src/statements/colophon.md
@@ -51,6 +51,7 @@ Due to this website being a static site, JavaScript is used to create dynamic an
     * LGBTQ+ events, International Women's Day, website anniversary and my birthday;
     * Release anniversaries of [{% cite "A Summer’s End — Hong Kong 1986" %}](/shrines/asummersend), [{% cite "Star Wars: Knights of the Old Republic" %}](/shrines/starwarskotor) and [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts) on their respective shrines;
     * Birthdays of characters from {% cite "A Summer’s End — Hong Kong 1986" %} on its shrine.
+* When this site is viewed on mobile devices, the navigation bar utilises a button that uses JavaScript to toggle the display of the navigation links when the button is clicked.
 * Every page has a button on the bottom right corner to allow you to quickly scroll to the top of the page. This scroll-to-top button uses JavaScript to show or hide the button based on scroll position.
     * A "Back to top" link that does not use JavaScript is available on each page's bottom footer, but the JavaScript version allows visitors to quickly scroll to the top page without needing to reach the bottom footer.
 * [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.