feat: added vueuse for onClickOutside, upgraded functionality for hamburger menu and locale picker

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>