App.vue

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

    <div v-if="user.steeringUser !== null" class="tw-flex-1 tw-flex tw-my-8">
      <router-view :modules="modules" :user="user" />
    </div>

    <div v-else class="tw-flex-1 tw-flex tw-my-8">
      <home :modules="modules" :user="user" />
    </div>

    <app-footer :modules="modules" />
  </div>
</template>

<script setup>
import AppHeader from './components/Header.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'

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

const user = computed(() => store.state.auth.user)
const modules = computed(() => {
  if ((user.value?.logged_in ?? false) === false) return {}
  else if (user.value.steeringUser && user.value.steeringUser.is_superuser) {
    return {
      main: [
        {
          icon: '/assets/shows.svg',
          slug: 'shows',
          title: t('navigation.shows'),
        },
        {
          icon: '/assets/files.svg',
          slug: 'files',
          title: t('navigation.filesPlaylists'),
        },
        {
          icon: '/assets/calendar.svg',
          slug: 'calendar',
          title: t('navigation.calendar'),
        },
      ],
      footer: [
        {
          slug: 'settings',
          title: t('navigation.settings'),
        },
      ],
    }
  } else {
    return {
      main: [
        {
          icon: '/assets/shows.svg',
          slug: 'shows',
          title: t('navigation.shows'),
        },
        {
          icon: '/assets/files.svg',
          slug: 'files',
          title: t('navigation.filesPlaylists'),
        },
      ],

      footer: [],
    }
  }
})

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