Add hunt detail

app/layouts/default.vue

@@ -1,34 +1,80 @@
 <script setup lang="ts">
-const { locale, locales } = useI18n();
-const switchLocalePath = useSwitchLocalePath();
+const { loggedIn, clear } = useUserSession();
 
-const availableLocales = computed(() => {
-  return locales.value.filter((i) => l(i) !== locale.value);
+const route = useRoute();
+const breakpoints = useBreakpoint();
+
+const isSidebarVisible = ref(breakpoints.mdUp);
+
+watchEffect(() => {
+  isSidebarVisible.value = breakpoints.smUp;
 });
-
-const { loggedIn, clear, user } = useUserSession();
-const localePath = useLocalePath();
-function l(locale: (typeof locales.value)[0]) {
-  return typeof locale === 'string' ? locale : locale.code;
-}
 </script>
 
 <template>
-  <div>
-    <div class="m-2 flex flex-row gap-4 underline">
-      <NuxtLink
-        v-for="loc in availableLocales"
-        :key="l(loc)"
-        :to="switchLocalePath(l(loc))"
-        :title="$t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) })"
-        >{{ $t(`locales.${l(loc)}`) }}
-      </NuxtLink>
-      <a v-if="loggedIn" href="#" @click.prevent="clear">Logout</a>
-      <NuxtLink v-else :to="localePath('/login')">Login</NuxtLink>
-      <NuxtLink :to="localePath('/')">Home</NuxtLink>
-    </div>
-    <Suspense>
-      <slot />
-    </Suspense>
-  </div>
+  <VaLayout
+    :top="{ fixed: true, order: 2 }"
+    :left="{
+      fixed: true,
+      absolute: breakpoints.smDown,
+      order: 1,
+      overlay: breakpoints.smDown && isSidebarVisible
+    }"
+    @left-overlay-click="isSidebarVisible = false"
+  >
+    <template #top>
+      <VaNavbar shadowed>
+        <template #left>
+          <VaButton
+            preset="secondary"
+            :icon="isSidebarVisible ? 'menu_open' : 'menu'"
+            @click="isSidebarVisible = !isSidebarVisible"
+          />
+        </template>
+        <template #center>{{ $t('layouts.default_tile') }}</template>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="isSidebarVisible">
+        <VaSidebarItem
+          :to="$localePath('/')"
+          :active="$localePath('/') === route.path"
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="home" />
+            <VaSidebarItemTitle>Home</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSpacer />
+        <VaSidebarItem v-if="loggedIn" @click="clear">
+          <VaSidebarItemContent>
+            <VaIcon name="logout" />
+            <VaSidebarItemTitle>
+              {{ $t('auth.logout') }}
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem v-else :to="$localePath('/login')">
+          <VaSidebarItemContent>
+            <VaIcon name="login" />
+            <VaSidebarItemTitle>
+              {{ $t('auth.login') }}
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <LangSwitcher />
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <main>
+        <article class="p-4">
+          <Suspense>
+            <slot />
+          </Suspense>
+        </article>
+      </main>
+    </template>
+  </VaLayout>
 </template>