<template>
    <v-app dark>
        <Navbar />
        <v-main>
            <v-container fill-height>
                <v-row no-gutters justify="center">
                    <nuxt />
                </v-row>
                <v-snackbar v-model="toast" :color="color">{{
                    msg
                }}</v-snackbar>
            </v-container>
        </v-main>
    </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
    components: { Navbar },
    data: () => ({
        toast: false,
        color: '',
        msg: '',
    }),
    mounted() {
        this.$root.$on('toast', (msg, color) => {
            this.msg = msg
            this.color = color || ''
            this.toast = true
        })
    },
}
</script>

<style>
html {
    overflow-y: auto;
}
</style>
