From 17e69a533d75baca6b11701874cb3f6cf8a48ef0 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sun, 21 Apr 2024 18:49:23 +0800
Subject: [PATCH] fixed hamburger menu and edit link

---
 src/components/blocks/CommunityLinks.astro |  4 ++--
 src/components/blocks/navBar.astro         | 13 +++++++----
 src/components/blocks/verticalNav.astro    | 25 +++++++++++++---------
 src/components/ui/SearchModal.astro        |  8 +------
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/blocks/CommunityLinks.astro b/src/components/blocks/CommunityLinks.astro
index faf397f..278d243 100644
--- a/src/components/blocks/CommunityLinks.astro
+++ b/src/components/blocks/CommunityLinks.astro
@@ -1,11 +1,11 @@
 ---
-const currentUrl = Astro.url.pathname;
+const currentUrl = Astro.url.pathname.slice(0, -1) + ".md";
 ---
 
 <ul class="list-none text-sm">
 	<li class="ml-[0.5rem] my-2">
 		<a
-			href={`https://github.com/liyunze-coding/coworking-website/edit/main/src/pages${currentUrl}.md`}
+			href={`https://github.com/liyunze-coding/coworking-website/edit/main/src/pages${currentUrl}`}
 			class="inline-flex gap-2 transition-colors duration-150 text-white hover:no-underline hover:text-blue-400"
 		>
 			<svg
diff --git a/src/components/blocks/navBar.astro b/src/components/blocks/navBar.astro
index f4007c8..a36b0d5 100644
--- a/src/components/blocks/navBar.astro
+++ b/src/components/blocks/navBar.astro
@@ -14,6 +14,7 @@ import SearchModal from "../ui/SearchModal.astro";
 		<label
 			class="hamburger-menu flex lg:hidden top-2 left-5"
 			aria-label="Menu"
+			transition:persist="hamburger-menu"
 		>
 			<input type="checkbox" aria-controls="navigation" />
 		</label>
@@ -174,20 +175,22 @@ import SearchModal from "../ui/SearchModal.astro";
 </style>
 
 <script is:inline>
+	const verticalNavBar = document.getElementById("vertical-navbar");
+	const hamburgerMenu = document.querySelector(".hamburger-menu input");
+
 	// JavaScript for toggling the menu
 	document.addEventListener("DOMContentLoaded", function () {
 		// Close the menu when a link is clicked
 		const navbarLinks = document.querySelectorAll("#vertical-navbar a");
+
 		navbarLinks.forEach((link) => {
 			link.addEventListener("click", function () {
-				if (verticalNavBar)
-					verticalNavBar.classList.add("-translate-x-[200%]");
+				if (verticalNavBar) hamburgerMenu.checked = false;
 			});
 		});
 	});
 
-	// comment this out if you don't want the search modal
-	window.addEventListener("DOMContentLoaded", (event) => {
+	document.addEventListener("astro:page-load", () => {
 		// @ts-ignore
 		new PagefindUI({
 			element: "#searchModal-search",
@@ -197,5 +200,7 @@ import SearchModal from "../ui/SearchModal.astro";
 			showImages: false,
 			autofocus: false,
 		});
+
+		if (hamburgerMenu) hamburgerMenu.checked = false;
 	});
 </script>
diff --git a/src/components/blocks/verticalNav.astro b/src/components/blocks/verticalNav.astro
index 36cb74d..50eb4ec 100644
--- a/src/components/blocks/verticalNav.astro
+++ b/src/components/blocks/verticalNav.astro
@@ -164,17 +164,22 @@ const { showHome } = Astro.props;
 				link.classList.add("text-gray-400");
 			}
 		});
+
+		// close dialog
+		const dialog = document.querySelector("dialog");
+
+		if (dialog) {
+			dialog.close();
+		}
 	});
 
-	window.addEventListener("DOMContentLoaded", (event) => {
-		// @ts-ignore
-		new PagefindUI({
-			element: "#vertical-search",
-			showSubResults: false,
-			showEmptyFilters: false,
-			debounceTimeoutMs: 0,
-			showImages: false,
-			autofocus: false,
-		});
+	// @ts-ignore
+	new PagefindUI({
+		element: "#vertical-search",
+		showSubResults: false,
+		showEmptyFilters: false,
+		debounceTimeoutMs: 0,
+		showImages: false,
+		autofocus: false,
 	});
 </script>
diff --git a/src/components/ui/SearchModal.astro b/src/components/ui/SearchModal.astro
index b55377a..0286e4e 100644
--- a/src/components/ui/SearchModal.astro
+++ b/src/components/ui/SearchModal.astro
@@ -50,11 +50,5 @@ const { id } = Astro.props;
 			</svg>
 		</button>
 	</form>
-	<div
-		id=`${id}-search`
-		class="mt-2"
-		transition:name="search"
-		transition:persist
-	>
-	</div>
+	<div id=`${id}-search` class="mt-2"></div>
 </dialog>