    <template>
  <v-navigation-drawer v-model="showMenuBar" v-if="showMenuBar" app :clipped="$vuetify.breakpoint.mdAndUp">
    <v-list dense>
      <v-list-item link>
        <v-list-item-action>
          <v-icon>mdi-home</v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>Home</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item link>
        <v-list-item-action>
          <v-icon>mdi-contact-mail</v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>Contact</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>
    
 
<script>
export default {
  name: "NavigationBar",
  props: ["showMenu"],
  data: () => ({
    drawer: false,
    group: null,
    menuItems: [
      "Notes & Cards",
      "Wedding",
      "Business",
      "For the Desk",
      "For the Home",
      "Occasions",
      "Crane & Co",
      "",
      "Store Locator",
      "Sign-In"
    ]
  }),
  computed: {
    showMenuBar: {
      get: function() {
        return this.showMenu;
      },
      set: function(value) {
        this.showMenu = value;
      }
    }
  },
  watch: {}
};
</script>

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