<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>
