App.vue

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

    <div class="tw-flex-1 tw-flex tw-my-8">
      <router-view/>
    </div>

    <app-footer />
  </div>
</template>

<script>

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import { translationVm } from '@/plugins/translation'

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

export default {
  name: 'App',
  components: {
    '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 = [
        { slug: 'home', title: this.$t('navigation.home') },
      ]

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

      return modules
    },
  },
  created () {
    this.$store.dispatch('auth/oidcInit')
  },
  methods: {
    signIn () {
      this.$store.dispatch('auth/signinRedirect')
    },
    signOut () {
      this.$store.dispatch('auth/signoutRedirect')
    },
  }
}
</script>

<style>
html, body {
  min-height: 100vh;
}
#app {
  color: #2e3436;
}
/*
#app .content-width {
  margin: auto;
  width: 920px;
  max-width: 920px;
}
*/
</style>