From 6ea53dc65213f573529b8b14572e5cf1c1f5519e Mon Sep 17 00:00:00 2001
From: Benjamin Singleton <19498453+tetrogem@users.noreply.github.com>
Date: Sat, 14 Jun 2025 12:38:57 -0500
Subject: [PATCH] feat: added vueuse for onClickOutside, upgraded functionality
 for hamburger menu and locale picker

---
 apps/vdn-static/package.json                  |  2 +
 apps/vdn-static/src/App.vue                   | 26 +++++++---
 .../src/components/organisms/LocalePicker.vue | 36 ++++----------
 pnpm-lock.yaml                                | 48 +++++++++++++++++++
 4 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/apps/vdn-static/package.json b/apps/vdn-static/package.json
index 599813b..c8f678a 100644
--- a/apps/vdn-static/package.json
+++ b/apps/vdn-static/package.json
@@ -11,6 +11,8 @@
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.6",
 		"@types/node": "^22.15.17",
+		"@vueuse/components": "^13.3.0",
+		"@vueuse/core": "^13.3.0",
 		"bulma": "^1.0.4",
 		"tailwindcss": "^4.1.6",
 		"vue": "^3.5.13",
diff --git a/apps/vdn-static/src/App.vue b/apps/vdn-static/src/App.vue
index 6fedc9b..3a5d485 100644
--- a/apps/vdn-static/src/App.vue
+++ b/apps/vdn-static/src/App.vue
@@ -3,16 +3,21 @@ import "./assets/style.scss";
 import { ref, type Ref } from "vue";
 import { SAMPLE } from "@repo/common/sample";
 import LocalePicker from "./components/organisms/LocalePicker.vue";
+import { vOnClickOutside } from "@vueuse/components";
 
 const burgerOpen: Ref<boolean> = ref<boolean>(false);
 
 const toggleBurger = (): void => {
 	burgerOpen.value = !burgerOpen.value;
 };
+
+const closeBurger = (): void => {
+	burgerOpen.value = false;
+};
 </script>
 
 <template>
-	<div class="min-h-screen flex flex-col">
+	<div class="min-h-screen flex flex-col" v-on-click-outside="closeBurger">
 		<!-- Main application wrapper -->
 		<nav
 			class="navbar is-fixed-top"
@@ -37,15 +42,24 @@ const toggleBurger = (): void => {
 
 			<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
 				<div class="navbar-start">
-					<RouterLink class="navbar-item" to="/"
+					<RouterLink
+						class="navbar-item"
+						to="/"
+						@click="closeBurger()"
 						>What is Viossa?</RouterLink
 					>
-					<RouterLink class="navbar-item" to="/resources"
+					<RouterLink
+						class="navbar-item"
+						to="/resources"
+						@click="closeBurger()"
 						>Resources</RouterLink
 					>
-					<RouterLink class="navbar-item" to="/resources">{{
-						SAMPLE
-					}}</RouterLink>
+					<RouterLink
+						class="navbar-item"
+						to="/resources"
+						@click="closeBurger()"
+						>{{ SAMPLE }}</RouterLink
+					>
 					<LocalePicker />
 				</div>
 			</div>
diff --git a/apps/vdn-static/src/components/organisms/LocalePicker.vue b/apps/vdn-static/src/components/organisms/LocalePicker.vue
index ddbf611..c922d0b 100644
--- a/apps/vdn-static/src/components/organisms/LocalePicker.vue
+++ b/apps/vdn-static/src/components/organisms/LocalePicker.vue
@@ -1,44 +1,28 @@
 <script setup lang="ts">
 import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
-import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
 
 const isOpen = ref<boolean>(false);
-const dropdownRef = useTemplateRef("dropdown");
 
 const toggleOpen = (): void => {
 	isOpen.value = !isOpen.value;
 };
 
+const close = (): void => {
+	isOpen.value = false;
+};
+
 const setLocaleId = (id: LocaleId): void => {
 	localeId.value = id;
+	close();
 };
-
-const detectFocus = (e: MouseEvent) => {
-	if (!isOpen) {
-		return;
-	}
-
-	const dropdown = dropdownRef.value;
-	if (!dropdown) {
-		return;
-	}
-
-	const { target } = e;
-	const focused =
-		target instanceof Node
-		&& (dropdown === target || dropdown.contains(target));
-
-	if (!focused) {
-		isOpen.value = false;
-	}
-};
-
-onMounted(() => window.addEventListener("click", detectFocus));
-onUnmounted(() => window.removeEventListener("click", detectFocus));
 </script>
 
 <template>
-	<div :class="['dropdown', isOpen && 'is-active']" ref="dropdown">
+	<div
+		:class="['dropdown', isOpen && 'is-active']"
+		v-on-click-outside="close">
 		<div class="dropdown-trigger">
 			<button
 				class="button"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d85e9a6..d122c89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,12 @@ importers:
       '@types/node':
         specifier: ^22.15.17
         version: 22.15.31
+      '@vueuse/components':
+        specifier: ^13.3.0
+        version: 13.3.0(vue@3.5.16(typescript@5.8.3))
+      '@vueuse/core':
+        specifier: ^13.3.0
+        version: 13.3.0(vue@3.5.16(typescript@5.8.3))
       bulma:
         specifier: ^1.0.4
         version: 1.0.4
@@ -693,6 +699,9 @@ packages:
   '@types/serve-static@1.15.8':
     resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/eslint-plugin@8.34.0':
     resolution: {integrity: sha512-QXwAlHlbcAwNlEEMKQS2RCgJsgXrTJdjXT08xEgbPFa2yYQgVjBymxP5DrfrE7X7iodSzd9qBUHUycdyVJTW1w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -831,6 +840,24 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/components@13.3.0':
+    resolution: {integrity: sha512-ZnJiVknPtlWyeE4qwIXkDOlHM3W4bgMCxgeXj1Dec/aF/+8N+yAj+7rRdRUWUnqr8uKRin368RjG1FPKsF2erA==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/core@13.3.0':
+    resolution: {integrity: sha512-uYRz5oEfebHCoRhK4moXFM3NSCd5vu2XMLOq/Riz5FdqZMy2RvBtazdtL3gEcmDyqkztDe9ZP/zymObMIbiYSg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@13.3.0':
+    resolution: {integrity: sha512-42IzJIOYCKIb0Yjv1JfaKpx8JlCiTmtCWrPxt7Ja6Wzoq0h79+YVXmBV03N966KEmDEESTbp5R/qO3AB5BDnGw==}
+
+  '@vueuse/shared@13.3.0':
+    resolution: {integrity: sha512-L1QKsF0Eg9tiZSFXTgodYnu0Rsa2P0En2LuLrIs/jgrkyiDuJSsPZK+tx+wU0mMsYHUYEjNsuE41uqqkuR8VhA==}
+    peerDependencies:
+      vue: ^3.5.0
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -2423,6 +2450,8 @@ snapshots:
       '@types/node': 22.15.31
       '@types/send': 0.17.5
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@typescript-eslint/eslint-plugin@8.34.0(@typescript-eslint/parser@8.34.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2622,6 +2651,25 @@ snapshots:
       typescript: 5.8.3
       vue: 3.5.16(typescript@5.8.3)
 
+  '@vueuse/components@13.3.0(vue@3.5.16(typescript@5.8.3))':
+    dependencies:
+      '@vueuse/core': 13.3.0(vue@3.5.16(typescript@5.8.3))
+      '@vueuse/shared': 13.3.0(vue@3.5.16(typescript@5.8.3))
+      vue: 3.5.16(typescript@5.8.3)
+
+  '@vueuse/core@13.3.0(vue@3.5.16(typescript@5.8.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.3.0
+      '@vueuse/shared': 13.3.0(vue@3.5.16(typescript@5.8.3))
+      vue: 3.5.16(typescript@5.8.3)
+
+  '@vueuse/metadata@13.3.0': {}
+
+  '@vueuse/shared@13.3.0(vue@3.5.16(typescript@5.8.3))':
+    dependencies:
+      vue: 3.5.16(typescript@5.8.3)
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.1