<template>
    <div class="flex bg-gray-200 h-screen overflow-y-hidden">
        <Nav />
        <div v-if="authUser" class="w-full overflow-y-auto">
            <TopBar />
            <main>
                <router-view :key="$route.fullPath"></router-view>
            </main>
        </div>
    </div>
</template>

<script>
import Nav from './Nav'
import TopBar from './TopBar'
import { mapGetters } from 'vuex'

export default {
    name: 'App',
    components : {
        Nav, TopBar
    },
    mounted() {
        this.$store.dispatch('fetchAuthUser')
    },
    created() {
        this.$store.dispatch('setPageTitle', this.$route.meta.title)
    },
    computed: {
        ...mapGetters({
            authUser: 'authUser',
        })
    },
    watch: {
        // eslint-disable-next-line no-unused-vars
        $route(to, from) {
            this.$store.dispatch('setPageTitle', to.meta.title)
        }
    }
}
</script>
