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')
        },

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