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 :modules="modules" :user="user"/>
        </div>

        <app-footer :modules="modules"/>
    </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 = {}

                // 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/applications-multimedia.png',
                                    slug: 'shows',
                                    title: this.$t('navigation.shows')
                                },
                                {
                                    icon: '/assets/audio-x-generic.png',
                                    slug: 'files',
                                    title: this.$t('navigation.filesPlaylists')
                                },
                                {
                                    icon: '/assets/x-office-calendar.png',
                                    slug: 'calendar',
                                    title: this.$t('navigation.calendar')
                                },
                            ],

                            footer: [
                                {
                                    slug: 'settings',
                                    title: this.$t('navigation.settings'),
                                },
                            ]
                        }
                        // Regular user
                        : {
                            main: [
                                {
                                    icon: '/assets/applications-multimedia.png',
                                    slug: 'shows',
                                    title: this.$t('navigation.shows')
                                },
                                {
                                    icon: '/assets/audio-x-generic.png',
                                    slug: 'files',
                                    title: this.$t('navigation.filesPlaylists')
                                },
                            ],

                            footer: [
                            ]
                        }
                }

                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>