<template>
    <div class="flex">
        <Nav />
        <div v-if="authUser" class="w-100">
            <TopBar />
            <main>
                <router-view :key="$route.fullPath" class="main"></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: {
            $route(to, from) {
                this.$store.dispatch('setPageTitle', to.meta.title)
            }
        }
    }
</script>
