115 lines
4.0 KiB
Vue
115 lines
4.0 KiB
Vue
<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>
|
|
</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-corn', link: "/category/vegetables", title: 'সবজি ' },
|
|
{ img: 'mdi-apple', link: "/category/fruits", title: 'ফল ' },
|
|
{ img: 'mdi-apple', link: "/category/cloths", title: 'পরিধান ' },
|
|
{ img: 'mdi-diamond', link: "/category/jewlry", title: 'গয়না ' },
|
|
{ img: 'mdi-spray', link: "/category/cosmetics", title: 'প্রসাধন ' },
|
|
{ img: 'mdi-tag', link: "/category/grocery", title: 'মুদি ' },
|
|
{ img: 'mdi-basket', link: "/bag", title: 'ব্যাগ ' },
|
|
{ img: 'mdi-cellphone-basic', link: "/contact", 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> |