From 4a96f797eae784e75aa2ae1534443ba1df36473d Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Thu, 26 Oct 2023 01:08:13 +0200
Subject: [PATCH] Improve Navbar auto close

---
 src/components/de/Navbar.tsx | 18 ++++++++++++------
 src/components/en/Navbar.tsx | 18 ++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/de/Navbar.tsx b/src/components/de/Navbar.tsx
index 0b9be9d..43dbc05 100644
--- a/src/components/de/Navbar.tsx
+++ b/src/components/de/Navbar.tsx
@@ -4,8 +4,8 @@ import {
   faGlobe,
   faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
-import { createSignal } from "solid-js";
-import { A, useLocation, useNavigate } from "solid-start";
+import { createEffect, createSignal } from "solid-js";
+import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
 import { FontAwesomeIcon } from "../FontAwesomeIcon";
 
 export const [lightMode, setLightMode] = createSignal(false);
@@ -14,6 +14,13 @@ const [menu, setMenu] = createSignal(false);
 function Navbar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const isRouting = useIsRouting();
+
+  createEffect(() => {
+    if (!isRouting() || !menu()) return;
+    setMenu(false);
+  });
+
   return (
     <>
       <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
@@ -81,10 +88,9 @@ function Navbar() {
           <FontAwesomeIcon icon={faCircleHalfStroke} />
         </button>
         <button
-          onClick={() => {
-            navigate("/en" + location.pathname.slice(3), { scroll: false });
-            setMenu(false);
-          }}
+          onClick={() =>
+            navigate("/en" + location.pathname.slice(3), { scroll: false })
+          }
         >
           Englisch <FontAwesomeIcon icon={faGlobe} />
         </button>
diff --git a/src/components/en/Navbar.tsx b/src/components/en/Navbar.tsx
index d74ddad..c9112f8 100644
--- a/src/components/en/Navbar.tsx
+++ b/src/components/en/Navbar.tsx
@@ -4,8 +4,8 @@ import {
   faGlobe,
   faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
-import { createSignal } from "solid-js";
-import { A, useLocation, useNavigate } from "solid-start";
+import { createEffect, createSignal } from "solid-js";
+import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
 import { FontAwesomeIcon } from "../FontAwesomeIcon";
 
 export const [lightMode, setLightMode] = createSignal(false);
@@ -14,6 +14,13 @@ const [menu, setMenu] = createSignal(false);
 function Navbar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const isRouting = useIsRouting();
+
+  createEffect(() => {
+    if (!isRouting() || !menu()) return;
+    setMenu(false);
+  });
+
   return (
     <>
       <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
@@ -81,10 +88,9 @@ function Navbar() {
           <FontAwesomeIcon icon={faCircleHalfStroke} />
         </button>
         <button
-          onClick={() => {
-            navigate("/de" + location.pathname.slice(3), { scroll: false });
-            setMenu(false);
-          }}
+          onClick={() =>
+            navigate("/de" + location.pathname.slice(3), { scroll: false })
+          }
         >
           Deutsch <FontAwesomeIcon icon={faGlobe} />
         </button>