import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

createApp({

    data() {
        return {
            boutonEntree: "#A63F03",
            boutonRepas: "",
            boutonDessert: "",

            carteEntree: "",
            carteRepas: "none",
            carteDessert: "none",

            montrerForm: "none",
            boutonCouleur: "",
            titrePage: "Menu",

            boutonMenu: "#A63F03",
            boutonCategorie: "",
            boutonEmployes: "",

            pageMenu: "",
            pageCategorie: "none",
            pageEmployes: "none",
        }
    },

    methods: {
        activerEntree() {
            this.boutonEntree = "#A63F03"
            this.carteEntree = "flex"

            this.boutonRepas = ""
            this.carteRepas = "none"

            this.boutonDessert = ""
            this.carteDessert = "none"
        },

        activerRepas() {
            this.boutonEntree = ""
            this.carteEntree = "none"

            this.boutonRepas = "#A63F03"
            this.carteRepas = "flex"

            this.boutonDessert = ""
            this.carteDessert = "none"
        },

        activerDessert() {
            this.boutonEntree = ""
            this.carteEntree = "none"

            this.boutonRepas = ""
            this.carteRepas = "none"

            this.boutonDessert = "#A63F03"
            this.carteDessert = "flex"
        },

        toggleForm() {
            this.montrerForm = this.montrerForm === 'none' ? 'block' : 'none'

            if (this.boutonCouleur === "") {

                this.boutonCouleur = "#A63F03"
              } else {
                this.boutonCouleur = ""
              }
        },

        activerMenu() {
            this.boutonMenu = "#A63F03"
            this.pageMenu = "block"

            this.boutonCategorie = ""
            this.pageCategorie = "none"

            this.boutonEmployes = ""
            this.pageEmployes = "none"

            this.titrePage = "Menu"
        },

        activerCategorie() {
            this.boutonMenu = ""
            this.pageMenu = "none"

            this.boutonCategorie = "#A63F03"
            this.pageCategorie = "block"

            this.boutonEmployes = ""
            this.pageEmployes = "none"

            this.titrePage = "Catégorie"
        },

        activerEmployes() {
            this.boutonMenu = ""
            this.pageMenu = "none"

            this.boutonCategorie = ""
            this.pageCategorie = "none"

            this.boutonEmployes = "#A63F03"
            this.pageEmployes = "block"

            this.titrePage = "Employés"
        },
    },

    mounted() {
    }

}).mount('#app')