pichunt/app/layouts/default.vue

<script setup lang="ts">
import { sluggy, useSettingsStore } from '#imports';
import { useHuntStore } from '~/stores/hunt';
import { useTitleStore } from '~/stores/title';

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

const settingsStore = useSettingsStore();
const { isSidebarVisible } = storeToRefs(settingsStore);

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

const isHuntAdmin = computed(
  () =>
    slugs.value?.huntSlug !== undefined &&
    huntStore.huntId === slugs.value.huntSlug.id &&
    huntStore.isMember
);
</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
        >
      </VaNavbar>
    </template>

    <template #left>
      <VaSidebar v-model="isSidebarVisible" :hoverable="breakpoints.mdUp">
        <VaSidebarItem
          :to="localePath('/')"
          :active="localePath('/') === route.path"
        >
          <VaSidebarItemContent>
            <VaIcon name="home" />
            <VaSidebarItemTitle>{{ t('page.home.title') }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          :to="localePath('/hunt')"
          :active="localePath('/hunt') === route.path"
        >
          <VaSidebarItemContent>
            <VaIcon name="cases" />
            <VaSidebarItemTitle>{{ t('page.hunt.title') }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="user?.role === 'CREATOR' || user?.role === 'ADMIN'"
          text-color="success"
          hover-color="success"
          active-color="onSuccess"
          :to="localePath('/admin/hunt/create')"
          :active="localePath('/admin/hunt/create') === route.path"
        >
          <VaSidebarItemContent>
            <VaIcon name="add_circle" />
            <VaSidebarItemTitle>{{
              t('page.create_hunt.sidebar')
            }}</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" />
            <VaSidebarItemTitle>{{
              slugs.huntSlug.name || 'Hunt'
            }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <VaSidebarItem
          v-if="slugs?.huntSlug && isHuntAdmin"
          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 && isHuntAdmin"
          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 && isHuntAdmin"
          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
          :to="localePath('/impressum')"
          :active="localePath('/impressum') === route.path"
        >
          <VaSidebarItemContent>
            <VaIcon name="balance" />
            <VaSidebarItemTitle>{{
              t('page.imprint.title')
            }}</VaSidebarItemTitle>
          </VaSidebarItemContent>
        </VaSidebarItem>
        <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>