gita-enterprise/layouts/default.vue

104 lines
3.3 KiB
Vue

<template>
<v-app>
<v-app-bar fixed shrink-on-scroll dense src="/img/banner-bakery.jpg" color="#a76f07de">
<v-toolbar-items>
<NuxtLink to="/">
<v-img style="height: 95px;width: 95px;" src="/gita-enterprise.svg"></v-img>
</NuxtLink>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down" color="pink">
<v-btn v-for="item in links" :key="item.icon" :to="item.link">{{ item.title }}</v-btn>
</v-toolbar-items>
<!-- <v-toolbar-side-icon slot="activator"></v-toolbar-side-icon> -->
</v-app-bar>
<br>
<br>
<br>
<br>
<Nuxt />
<div class="hidden-md-and-up">
<v-app-bar color="transparent" style="position: fixed;bottom: 0;">
<v-toolbar-title>Gita Enterprise</v-toolbar-title>
<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-subheader>Open in</v-subheader> -->
<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-list-item-avatar>X</v-list-item-avatar>
<v-list-item-title>Close This Menu</v-list-item-title>
</v-list-item>
</v-list>
</v-bottom-sheet>
<v-spacer></v-spacer>
<!-- <v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn> -->
<!-- <v-img style="height: 15px;width: 15px;" src="/gita-enterprise.svg"></v-img> -->
</v-app-bar>
</div>
<v-footer padless>
<v-card class="flex" flat tile>
<v-card-title class="teal">
<strong class="subheading">Get connected with us on social networks!</strong>
<v-spacer></v-spacer>
<v-btn v-for="icon in icons" :key="icon" class="mx-4" icon>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="py-2 white--text text-center">
{{ new Date().getFullYear() }}
<strong>
&COPY; Gita Enterprise, All Rights Reserved | Powered by
<a
href="https://dwd.siliconpin.com/"
>DWD Consultancy Services</a>
</strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
mobileMenu: false,
icons: [
'mdi-facebook',
'mdi-twitter',
'mdi-google',
'mdi-youtube',
],
links: [
{ img: 'mdi-home-circle', link: "/", title: 'Home' },
{ img: 'mdi-gift', link: "/products", title: 'Products' },
{ img: 'mdi-folder-image', link: "/gallery", title: 'Gallery' },
{ img: 'mdi-message-bulleted', link: "/about", title: 'About' },
{ img: 'mdi-phone-classic', link: "/contact", title: 'Contact' },
],
}),
}
</script>