🎨 use router.beforeEach instead of click handlers for menu collapse

Author: haliphax

src/app/components/global-menu.vue

@@ -1,24 +1,18 @@
 <script lang="ts" setup>
 import router from "@/router";
-import { onMounted, Ref, ref } from "vue";
+import { Ref, ref } from "vue";
 
 const details: Ref<HTMLDetailsElement | undefined> = ref();
-const items: Ref<HTMLUListElement | undefined> = ref();
-
-onMounted(() => {
-	items
-		.value!.querySelectorAll("a")
-		.forEach((v) =>
-			v.addEventListener("click", () => (details.value!.open = false)),
-		);
+router.beforeEach(() => {
+	details.value!.open = false;
 });
 </script>
 
 <template>
 	<nav>
 		<details ref="details">
 			<summary>Menu</summary>
-			<ul ref="items" class="menu-items">
+			<ul class="menu-items">
 				<li>
 					<router-link :to="{ name: 'main' }">Main</router-link>
 				</li>