<template>
    <div class="columns ml-3 mr-3">
        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
        <chismosa v-show="chismosaActiva"></chismosa>
    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import Chismosa from "./Chismosa.vue";
    import ProductosContainer from "./ProductosContainer.vue";
    import CategoriasContainer from "./CategoriasContainer.vue";

    export default {
        components: {CategoriasContainer, ProductosContainer, Chismosa},
        data() {
            return {
                chismosaActiva: false,
            }
        },
        mounted() {
            Event.$on('toggle-chismosa', (activa) => {
                this.chismosaActiva = activa;
            });
        },
    }
</script>