pichunt/app/layouts/default.vue

<script setup lang="ts">
import { useTitleStore } from '~/stores/title';

const { loggedIn, clear, user } = useUserSession();
const { t } = useI18n();
const route = useRoute();
const breakpoints = useBreakpoint();
const titleStore = useTitleStore();

const isSidebarVisible = ref(breakpoints.mdUp);

const slugs = computed(() => checkSlug(route.params));
</script>

<template>
  <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>
          {{ titleStore.title || t('layouts.default_tile') }}</template
        >
        <template #right>
          <VaButton
            round
            icon="help"
            :to="$localePath('/help')"
            title="Help"
            :preset="$localePath('/help') === route.path ? 'secondary' : ''"
            :border-color="$localePath('/help') === route.path ? 'primary' : ''"
          />
        </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>
        <VaSidebarItem
          :to="$localePath('/impressum')"
          :active="$localePath('/impressum') === route.path"
        >
          <VaSidebarItemContent>
            <VaIcon name="balance" />
            <VaSidebarItemTitle>{{
              t('page.imprint.title')
            }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="slugs?.huntSlug"
          :to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
          :active="
            $localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path
          "
        >
          <VaSidebarItemContent>
            <VaIcon name="camera_indoor" />
            <VaSidebarItemTitle>{{
              slugs.huntSlug.name || 'Hunt'
            }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="slugs?.huntSlug && user?.role === 'ADMIN'"
          text-color="danger"
          hover-color="danger"
          active-color="onDanger"
          :to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}/admin`)"
          :active="
            $localePath(`/hunt/${sluggy(slugs.huntSlug)}/admin`) === route.path
          "
        >
          <VaSidebarItemContent>
            <VaIcon name="admin_panel_settings" />
            <VaSidebarItemTitle>Hunt Admin</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="slugs?.huntSlug && user?.role === 'ADMIN'"
          text-color="danger"
          hover-color="danger"
          active-color="onDanger"
          :to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}/teams`)"
          :active="
            $localePath(`/hunt/${sluggy(slugs.huntSlug)}/teams`) === route.path
          "
        >
          <VaSidebarItemContent>
            <VaIcon name="groups" />
            <VaSidebarItemTitle>Hunt Teams</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="slugs?.huntSlug && slugs?.questSlug"
          :to="
            $localePath(
              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
            )
          "
          :active="
            $localePath(
              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
            ) === route.path
          "
        >
          <VaSidebarItemContent>
            <VaIcon name="question_mark" />
            <VaSidebarItemTitle>{{
              slugs.questSlug.name || 'Quest'
            }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="slugs?.huntSlug && slugs?.questSlug && user?.role === 'ADMIN'"
          text-color="danger"
          hover-color="danger"
          active-color="onDanger"
          :to="
            $localePath(
              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}/admin`
            )
          "
          :active="
            $localePath(
              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}/admin`
            ) === route.path
          "
        >
          <VaSidebarItemContent>
            <VaIcon name="question_mark" />
            <VaSidebarItemTitle>Quest Admin</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSpacer />
        <VaSidebarItem
          v-if="user"
          :to="$localePath('/profile')"
          :active="$localePath('/profile') === route.path"
          :hover-color="user.role === 'ADMIN' ? 'danger' : undefined"
          :text-color="user.role === 'ADMIN' ? 'danger' : undefined"
        >
          <VaSidebarItemContent>
            <VaIcon
              :name="
                user.role === 'ADMIN'
                  ? 'admin_panel_settings'
                  : 'account_circle'
              "
            />
            <VaSidebarItemTitle>
              {{ user.name }}
            </VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem v-if="loggedIn" @click="clear">
          <VaSidebarItemContent>
            <VaIcon name="logout" />
            <VaSidebarItemTitle>
              {{ t('auth.logout') }}
            </VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem v-else :to="$localePath(`/login?to=${route.path}`)">
          <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>