App.vue

<template>
  <div id="app" :key="locale" class="tw-flex tw-flex-col tw-min-h-screen">
    <AppNavbar :modules="modules" :user="user" />

    <div class="tw-flex-1 tw-flex tw-my-8">
      <RouterView v-if="user.steeringUser" />
      <Home v-else :modules="modules" :user="user" />
    </div>

    <AppFooter :modules="footerModules" :user="user" />
  </div>
</template>

<script setup lang="ts">
import AppNavbar from './components/Navbar.vue'
import AppFooter from './components/Footer.vue'
import Home from './Pages/Home.vue'
import { useStore } from 'vuex'
import { useI18n } from '@/i18n'
import { computed } from 'vue'
import { computedIter } from '@/util'

const store = useStore()
const { locale, t } = useI18n()

const user = computed(() => store.state.auth.user)
const footerModules = computedIter(function* () {
  if (user.value.steeringUser && user.value.steeringUser.is_superuser) {
    yield {
      slug: 'settings',
      title: t('navigation.settings'),
    }
  }
})

const modules = computedIter(function* () {
  if (user.value.steeringUser) {
    yield {
      icon: '/assets/shows.svg',
      slug: 'shows',
      title: t('navigation.shows'),
    }
    yield {
      icon: '/assets/files.svg',
      slug: 'files',
      title: t('navigation.filesPlaylists'),
    }
  }

  if (user.value.steeringUser && user.value.steeringUser.is_superuser) {
    yield {
      icon: '/assets/calendar.svg',
      slug: 'calendar',
      title: t('navigation.calendar'),
    }
  }
})

store.dispatch('auth/oidcInit')
</script>