From 30809a69c92438cebe5bbdb0a9f6c6020ea49eb3 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Tue, 17 Jun 2025 15:39:35 +0200
Subject: [PATCH] Move navbar script to dedicated file

---
 core/static/bundled/core/navbar-index.ts | 36 +++++++++++++++++++++++
 core/templates/core/base.jinja           | 37 +-----------------------
 2 files changed, 37 insertions(+), 36 deletions(-)
 create mode 100644 core/static/bundled/core/navbar-index.ts

diff --git a/core/static/bundled/core/navbar-index.ts b/core/static/bundled/core/navbar-index.ts
new file mode 100644
index 00000000..b5330d42
--- /dev/null
+++ b/core/static/bundled/core/navbar-index.ts
@@ -0,0 +1,36 @@
+import { exportToHtml } from "#core:utils/globals";
+
+exportToHtml("showMenu", () => {
+  const navbar = document.getElementById("navbar-content");
+  const current = navbar.getAttribute("mobile-display");
+  navbar.setAttribute("mobile-display", current === "hidden" ? "revealed" : "hidden");
+});
+
+document.addEventListener("alpine:init", () => {
+  const menuItems = document.querySelectorAll(".navbar details[name='navbar'].menu");
+  const isDesktop = () => {
+    return window.innerWidth >= 500;
+  };
+  for (const item of menuItems) {
+    item.addEventListener("mouseover", () => {
+      if (isDesktop()) {
+        item.setAttribute("open", "");
+      }
+    });
+    item.addEventListener("mouseout", () => {
+      if (isDesktop()) {
+        item.removeAttribute("open");
+      }
+    });
+    item.addEventListener("click", (event: MouseEvent) => {
+      // Don't close when clicking on desktop mode
+      if ((event.target as HTMLElement).nodeName !== "SUMMARY" || event.detail === 0) {
+        return;
+      }
+
+      if (isDesktop()) {
+        event.preventDefault();
+      }
+    });
+  }
+});
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index b1953004..9b50463c 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -18,6 +18,7 @@
       <noscript><link rel="stylesheet" href="{{ static('bundled/fontawesome-index.css') }}"></noscript>
 
       <script src="{{ url('javascript-catalog') }}"></script>
+      <script type="module" src={{ static("bundled/core/navbar-index.ts") }}></script>
       <script type="module" src={{ static("bundled/core/components/include-index.ts") }}></script>
       <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
@@ -107,42 +108,6 @@
 
     {% block script %}
       <script>
-        const menuItems = document.querySelectorAll(".navbar details[name='navbar'].menu");
-        const isDesktop = () => {
-          return window.innerWidth >= 500;
-        }
-        for (const item of menuItems){
-          item.addEventListener("mouseover", () => {
-            if (isDesktop()){
-              item.setAttribute("open", "");
-            }
-          })
-          item.addEventListener("mouseout", () => {
-            if (isDesktop()){
-              item.removeAttribute("open");
-            }
-          })
-          item.addEventListener("click", (event) => {
-            // Don't close when clicking on desktop mode
-            if (
-              event.target.nodeName !== "SUMMARY"
-              || event.detail === 0
-            ){
-              return;
-            }
-
-            if (isDesktop()){
-              event.preventDefault();
-            }
-          })
-        }
-
-        function showMenu() {
-          let navbar = document.getElementById("navbar-content");
-          const current = navbar.getAttribute("mobile-display");
-          navbar.setAttribute("mobile-display", current === "hidden" ? "revealed" : "hidden")
-        }
-
         document.addEventListener("keydown", (e) => {
           // Looking at the `s` key when not typing in a form
           if (e.keyCode !== 83 || ["INPUT", "TEXTAREA", "SELECT"].includes(e.target.nodeName)) {