Merge branch 'main' into monorepo

apps/vdn-static/src/App.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 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"
@@ -36,15 +41,22 @@ 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="/kotoba">
 						Kotoba
 					</RouterLink>
+					<LocalePicker />
 				</div>
 			</div>
 		</nav>