<template>
    <div id="head">
        <v-app-bar class="hidden-sm-and-down" color="green" fixed>
            <NuxtLink class="py-4 black--text" to="/">
                <img style="width:70px; padding:10px 5px 5px 5px" src="/icon.png" alt />
            </NuxtLink>

            <v-spacer></v-spacer>
            <v-toolbar-items class="hidden-sm-and-down" color="pink">
                <v-row align="center">
                    <NuxtLink
                        class="black--text"
                        v-for="item in links"
                        :key="item.icon"
                        :to="item.link"
                    >
                        <!-- <v-icon>{{ item.img }}</v-icon> -->
                        {{ item.title }}
                    </NuxtLink>
                    <a href="https://agent.swarnamath.com">Login</a>
                </v-row>
            </v-toolbar-items>
        </v-app-bar>

        <div class="hidden-md-and-up">
            <v-app-bar color="orange" style="position: fixed;top: 0;right:0;z-index:1">
                <NuxtLink class="py-4 black--text" to="/">
                    <img
                        style="width:70px; padding:10px 5px 5px 5px"
                        src="/icon.png"
                        alt
                    />
                </NuxtLink>

                <v-spacer></v-spacer>
                <v-bottom-sheet v-model="mobileMenu">
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn color="pink" v-bind="attrs" v-on="on">menu</v-btn>
                    </template>
                    <v-list>
                        <v-list-item
                            v-for="link in links"
                            :key="link.title"
                            :to="link.link"
                            @click="mobileMenu = false"
                        >
                            <v-list-item-avatar>
                                <v-icon>{{ link.img }}</v-icon>
                            </v-list-item-avatar>
                            <v-list-item-title>{{ link.title }}</v-list-item-title>
                           
                        </v-list-item>
                         <v-list-item @click="mobileMenu = false"> <v-icon> mdi-close-box </v-icon> close this menu</v-list-item>
                    </v-list>
                </v-bottom-sheet>
            </v-app-bar>
        </div>
    </div>
</template>
<script>
export default {
    data: () => ({
        mobileMenu: false,
        shoppingCart:[],
        links: [
            { img: 'mdi-account', link: "/category/services", title: 'পরিসেবা ' },
            { img: 'mdi-diamond', link: "/category/jewlry", title: 'গয়না ' },
            { img: 'mdi-spray', link: "/category/cosmetics", title: 'প্রসাধন  ' },
            { img: 'mdi-corn', link: "/category/vegetables", title: 'সবজি ' },
            { img: 'mdi-apple', link: "/category/fruits", title: 'ফল ' },
            { img: 'mdi-apple', link: "/category/cloths", title: 'পরিধান ' },
            { img: 'mdi-tag', link: "/category/grocery", title: 'মুদি ' },
            { img: 'mdi-basket', link: "/bag", title: 'ব্যাগ ' },
            { img: 'mdi-cellphone-basic', link: "/category/", title: 'সব বিভাগ' }

        ],
    }),
    // mounted() {
    //     /// Retrieves cart from local storage when user first loads

    //     this.shoppingCart = JSON.parse(localStorage.getItem('shoppingCart') || "[]")

    // },
    // watch: {
    //     shoppingCart: {
    //         handler(newValue) {
    //             /// Updates the item in local storage

    //             localStorage.setItem(
    //                 'shoppingCart', JSON.stringify(newValue));

    //         }, deep: true
    //     }
    // }
}
</script>
<style scoped>
a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;

    padding: 0px 5px;
    margin: 0 2px;
    font-weight: 500;
    letter-spacing: 1px;
}
#head {
    min-height: 90px;
}
@media screen and (max-width: 760px) {
    #head {
        min-height: 60px;
    }
}
</style>