feat: add language switcher modal to top level of page

src/App.vue

@@ -1,13 +1,53 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { RouterView } from "vue-router";
 import { version } from "../package.json";
 import router from "@/router";
+
+import ModalDialog from "@/components/ModalDialog.vue";
+import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import LinkButton from "@/components/LinkButton.vue";
 import SiteNavigation from "@/components/SiteNavigation.vue";
 import NavigationItem from "@/components/NavigationItem.vue";
+import LanguageButton from "@/components/LanguageButton.vue";
 import SiteFooter from "@/components/SiteFooter.vue";
+
+import LanguageIcon from "@/assets/icons/LanguageIcon.vue";
+
+const locales = [
+  { code: "en", name: "English", flag: "🇬🇧" },
+  { code: "de", name: "Deutsch", flag: "🇩🇪" },
+];
+
+const langswitcher = ref<InstanceType<typeof ModalDialog>>();
+
+const showModal = () => {
+  langswitcher.value?.showModal();
+};
+
+const close = () => {
+  langswitcher.value?.close();
+};
 </script>
 
 <template>
+  <ModalDialog id="lang-select" ref="langswitcher">
+    <template #heading>{{ $t("langswitcher.title") }}</template>
+    <template #message>
+      <p>{{ $t("langswitcher.prompt") }}</p>
+      <LocaleSwitcher
+        id="locale-switch"
+        v-model="$i18n.locale"
+        :locales="locales"
+      />
+    </template>
+    <template #buttons>
+      <LinkButton @click.prevent="close()">
+        {{ $t("langswitcher.buttonClose") }}
+      </LinkButton>
+    </template>
+  </ModalDialog>
+
   <SiteNavigation>
     <NavigationItem
       v-for="(route, idx) in router.options.routes"
@@ -18,6 +58,9 @@ import SiteFooter from "@/components/SiteFooter.vue";
   </SiteNavigation>
 
   <main>
+    <LanguageButton>
+      <LanguageIcon @click.prevent="showModal()" />
+    </LanguageButton>
     <RouterView />
   </main>