44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
<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"/>
|