From 0571f83a8e4b6c71174297abae5e9fd0b0451e6d Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Wed, 19 Feb 2025 21:37:55 -0800
Subject: [PATCH] Revamp navbar and navigation menu

---
 src/component/navbar.svelte | 46 ++++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/component/navbar.svelte b/src/component/navbar.svelte
index bb75982..6aa6391 100644
--- a/src/component/navbar.svelte
+++ b/src/component/navbar.svelte
@@ -3,6 +3,12 @@
     var pages = document.getElementById("pages") as HTMLElement;
     pages.classList.toggle("hidden");
   }
+  function modalMenuProcessClick(e: MouseEvent) {
+    var pages = document.getElementById("pages") as HTMLElement;
+    if (e.target == pages) {
+      pages.classList.toggle("hidden");
+    }
+  }
 </script>
 
 <nav>
@@ -25,30 +31,42 @@
       rel="noopener noreferrer"
       aria-label="Colormatic Git"><i class="bi bi-git"></i></a
     >
-    <button
-      on:click={toggleModalMenu}
-      class="responsive menu-button"
-      aria-label="menu"><i class="bi bi-list"></i></button
+    <button on:click={toggleModalMenu} class="menu-button" aria-label="menu"
+      ><i class="bi bi-list"></i></button
     >
   </div>
 </nav>
-<span id="pages" class="modalbg hidden">
-  <script>
-    // A dirty way to close the modal when the user clicks outside
-    var pages = document.getElementById("pages");
-    pages.addEventListener("click", (e) => {
-      if (e.target == pages) {
-        pages.classList.toggle("hidden");
-      }
-    });
-  </script>
+
+<!--
+The following Svelte ignore statements aren't ideal, but it seems to be
+the only way to achieve a proper modal. They even do this in the
+Svelte modal example, https://svelte.dev/playground/modal
+-->
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<span on:click={modalMenuProcessClick} id="pages" class="modalbg hidden">
   <div>
     <button on:click={toggleModalMenu} class="close" aria-label="Close"
       ><i class="bi bi-x"></i></button
     >
     <ul>
+      <li><a href="/">Home</a></li>
       <li><a href="/zakarya">Zakarya</a></li>
       <li><a href="/studios">Colormatic Studios</a></li>
+      <li>
+        <a
+          href="https://git.colormatic.org"
+          target="_blank"
+          rel="noopener noreferrer">Colormatic Git</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://auth.colormatic.org"
+          target="_blank"
+          rel="noopener noreferrer">Colormatic ID</a
+        >
+      </li>
       <li><a href="/about">About</a></li>
     </ul>
   </div>