<template>
    <div class="rounded-xl bg-primary-lighten mx-2 my-2">
        <v-container fluid style="overflow-x: auto; white-space: nowrap">
            <v-btn
                class="mr-2"
                size="small"
                :variant="active_menu.id === qmenu.id ? 'elevated' : 'outlined'"
                rounded="xl"
                color="primary-darken"
                v-for="qmenu in qmenus"
                @click="redirect(qmenu)"
            >
                {{ qmenu.name }}
            </v-btn>
        </v-container>
    </div>
</template>

<script type="module">
    export default {
        name: "QuickAccessComponent",
        mounted() {
            this.$store.dispatch('system/loadQuickMenu');
        },
        data() {
            return {
                pressed: false,
            }
        },
        computed: {
            qmenus() {
                return this.$store.state.system.quick_menu;
            },
            active_menu: {
                get() {
                    return this.$store.state.system.active_menu;
                },
                set(menu) {
                    this.$store.commit("system/update_active_menu", menu);
                }
            }
        },
        methods: {
            redirect(item) {
                this.active_menu = item;
                console.log("redirect url ", item.url);
            }
        },
    }
</script>