<template>
    <div class="dropdown is-right navbar-item" :class="{'is-active':activa}">
        <div class="dropdown-trigger">
            <a class="text-a" aria-haspopup="true" :aria-controls="id" @click.capture="toggle">
            <span class="icon is-small mr-1">
                <img src="/assets/chismosa.png">
            </span>
            <span v-text="'$' + this.$root.pedido.total"></span>
            </a>
        </div>
        <div class="dropdown-menu chismosa-menu" :id="id" role="menu">
            <div class="dropdown-content">
                <div class="dropdown-item">
                    <chismosa></chismosa>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Chismosa from './Chismosa.vue'
export default {
    components: {
        Chismosa
    },
    props: {
        id: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            activa: false
        }
    },
    methods: {
        toggle() {
            this.activa = !this.activa
        },
    },
}
</script>

<style>

@media (max-width: 719px) {
    .chismosa-menu {
        vertical-align: top;
        overflow-y: auto;
        max-height: 75vh;
        max-width: 100vw;
    }
}

@media (min-width: 720px) {
    .chismosa-menu {
        vertical-align: top;
        overflow-y: auto;
        max-height: 75vh;
    }
}
</style>