improved mobile responsiveness

src/components/blocks/CommunityLinks.astro

@@ -5,7 +5,7 @@ const currentUrl = Astro.url.pathname;
 <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}`}
+			href={`https://github.com/liyunze-coding/coworking-website/edit/main/src/pages${currentUrl}.md`}
 			class="inline-flex gap-2 transition-colors duration-150 text-white hover:no-underline hover:text-blue-400"
 		>
 			<svg

src/components/blocks/navBar.astro

@@ -35,7 +35,7 @@ import SearchModal from "../ui/SearchModal.astro";
 		</div>
 		<!-- Logo -->
 		<div
-			class="flex-1 flex items-center text-xl select-none ml-10 lg:ml-0"
+			class="lg:flex-1 flex items-center text-3xl lg:text-xl select-none mx-auto lg:mx-0"
 			transition:name="cowo-logo"
 			transition:persist
 		>
@@ -75,8 +75,8 @@ import SearchModal from "../ui/SearchModal.astro";
 			>
 		</div>
 		<!-- Search bar -->
-		<div class="flex lg:flex-1 justify-end relative">
-			<SearchModal id="dialog" open="Open modal" />
+		<div class="hidden lg:flex lg:flex-1 justify-end relative">
+			<SearchModal id="searchModal" open="Open modal" />
 		</div>
 	</div>
 </div>
@@ -130,7 +130,7 @@ import SearchModal from "../ui/SearchModal.astro";
 	window.addEventListener("DOMContentLoaded", (event) => {
 		// @ts-ignore
 		new PagefindUI({
-			element: "#search",
+			element: "#searchModal-search",
 			showSubResults: false,
 			showEmptyFilters: false,
 			debounceTimeoutMs: 0,

src/components/blocks/verticalNav.astro

@@ -1,4 +1,6 @@
 ---
+import SearchModal from "../ui/SearchModal.astro";
+
 type Navigation = Record<
 	string,
 	{ title: string; url: string; order: number }[]
@@ -69,6 +71,14 @@ const { showHome } = Astro.props;
 
 <div class="relative">
 	<nav id="vertical-nav-component" class="flex flex-col" data-pagefind-ignore>
+		{
+			showHome && (
+				<div class="mb-5">
+					<SearchModal id="vertical" open="Open modal" />
+				</div>
+			)
+		}
+
 		{
 			showHome && (
 				<div class="mb-2">
@@ -155,4 +165,16 @@ const { showHome } = Astro.props;
 			}
 		});
 	});
+
+	window.addEventListener("DOMContentLoaded", (event) => {
+		// @ts-ignore
+		new PagefindUI({
+			element: "#vertical-search",
+			showSubResults: false,
+			showEmptyFilters: false,
+			debounceTimeoutMs: 0,
+			showImages: false,
+			autofocus: false,
+		});
+	});
 </script>

src/components/ui/SearchModal.astro

@@ -33,7 +33,7 @@ const { id } = Astro.props;
 
 <dialog
 	id=`${id}`
-	class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#202020] border-2 border-solid border-[#505050] text-white rounded-lg w-1/2 h-5/6 px-10 py-10 animate-fadeIn"
+	class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#202020] border-2 border-solid border-[#505050] text-white rounded-lg w-4/5 lg:w-1/2 h-5/6 px-10 py-10 animate-fadeIn"
 >
 	<form method="dialog">
 		<button class="absolute top-3 right-3"
@@ -50,6 +50,11 @@ const { id } = Astro.props;
 			</svg>
 		</button>
 	</form>
-	<div id="search" class="mt-2" transition:name="search" transition:persist>
+	<div
+		id=`${id}-search`
+		class="mt-2"
+		transition:name="search"
+		transition:persist
+	>
 	</div>
 </dialog>