<template>
  <v-card class="mx-auto overflow-hidden" height="500">
    <v-app-bar prominent>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" v-if="drawer" absolute left temporary color="bg-blue-darken" width="auto">
        <v-icon class="mdi mdi-close pa-5 white--text subtitle-2" @click.stop="drawer = !drawer"></v-icon>
        <div class="py-0 px-8">
            <v-text-field>
                <v-icon slot="prepend" color="white" class="title">mdi mdi-magnify</v-icon>
            </v-text-field>
        </div>
        
        <v-list nav dense class="no-background pa-6">
            <v-list-item-group v-model="group">
            <v-list-item v-for="(menu, index) in menuItems" v-bind:key="index">
                <v-list-item-title class="white--text font-28px font-weight-500 line-height-48px text-uppercase " href="#">{{ menu }}</v-list-item-title>
            </v-list-item>
            </v-list-item-group>
        </v-list>
    </v-navigation-drawer>
  </v-card>
</template>
    
 
<script>
export default {
  name: "MobileNavigationBar",
  data: () => ({
    drawer: false,
    group: null,
    menuItems:['Notes & Cards','Wedding','Business','For the Desk','For the Home','Occasions','Crane & Co','','Store Locator','Sign-In'],
  }),
  watch: {
    group() {
      this.drawer = false;
    }
  }
};
</script>

<style src="./MobileNavigationBar.scss" lang="scss"/>
