App.vue

<template>
  <div id="app">
    <app-header
      :modules="modules"
      :user="user"
    />
    <router-view />
    <app-footer />
  </div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import header from './components/Header.vue'
import footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    'app-header': header,
    'app-footer': footer
  },
  data () {
    return {
      modules_logged_out: [
        { slug: 'home', title: 'Home' },
      ],
      modules_logged_in: [
        { slug: 'home', title: 'Home' },
        { slug: 'shows', title: 'Shows' },
        { slug: 'files', title: 'Files & Playlists' },
      ],
      modules_logged_in_superuser : [
        { slug: 'home', title: 'Home' },
        { slug: 'shows', title: 'Shows' },
        { slug: 'files', title: 'Files & Playlists' },
        { slug: 'emissions', title: 'Emissions' },
      ],
    }
  },
  computed: {
    userOIDC () { return this.$store.state.auth.userOIDC },
    user () { return this.$store.state.auth.user },
    modules: function () {
      if (this.user.logged_in === true) {
        if (this.user.steeringUser && this.user.steeringUser.is_superuser) {
          return this.modules_logged_in_superuser
        } else {
          return this.modules_logged_in
        }
      } else {
        return this.modules_logged_out
      }
    }
  },
  created () {
    this.$store.dispatch('auth/oidcInit')
  },
  methods: {
    signIn () {
      this.$store.dispatch('auth/signinRedirect')
    },
    signOut () {
      this.$store.dispatch('auth/signoutRedirect')
    },
  }
}
</script>

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