<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 Chismosa from './Chismosa.vue';
    import ProductosContainer from './ProductosContainer.vue';
    import CategoriasContainer from './CategoriasContainer.vue';

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