App.vue

<template>
  <div id="app" :key="localeKey" 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>
import { translationVm } from '@/plugins/translation'

import header from './components/Header.vue'
import footer from './components/Footer.vue'
import Home from './Pages/Home.vue'

export default {
  name: 'App',
  components: {
    Home,
    'app-header': header,
    'app-footer': footer,
  },
  computed: {
    userOIDC() {
      return this.$store.state.auth.userOIDC
    },
    user() {
      return this.$store.state.auth.user
    },
    localeKey: () => translationVm.activeLocale,
    modules: function () {
      // Logged out
      let modules = {}

      // All icons used are taken from the Tango Project, which put them into public domain:
      // http://tango.freedesktop.org

      if (this.user.logged_in === true) {
        modules =
          this.user.steeringUser && this.user.steeringUser.is_superuser
            ? // Super user
              {
                main: [
                  {
                    icon: '/assets/shows.svg',
                    slug: 'shows',
                    title: this.$t('navigation.shows'),
                  },
                  {
                    icon: '/assets/files.svg',
                    slug: 'files',
                    title: this.$t('navigation.filesPlaylists'),
                  },
                  {
                    icon: '/assets/calendar.svg',
                    slug: 'calendar',
                    title: this.$t('navigation.calendar'),
                  },
                ],

                footer: [
                  {
                    slug: 'settings',
                    title: this.$t('navigation.settings'),
                  },
                ],
              }
            : // Regular user
              {
                main: [
                  {
                    icon: '/assets/shows.svg',
                    slug: 'shows',
                    title: this.$t('navigation.shows'),
                  },
                  {
                    icon: '/assets/files.svg',
                    slug: 'files',
                    title: this.$t('navigation.filesPlaylists'),
                  },
                ],

                footer: [],
              }
      }

      return modules
    },
  },
  created() {
    this.$store.dispatch('auth/oidcInit')
  },
}
</script>