You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.3 KiB
70 lines
1.3 KiB
<template> |
|
<div class="row steel-border" id="menu-bar"> |
|
<div class="menu-item"> |
|
<router-link :to="'/shop'">Shop</router-link> |
|
</div> |
|
|
|
<div class="menu-item"> |
|
<a href="javascript:" v-on:click="openModal('inventoryModal')">Inventory</a> |
|
</div> |
|
|
|
<div class="menu-center"> |
|
<router-link :to="'/'">Field</router-link> |
|
</div> |
|
|
|
<div class="menu-item"> |
|
Item |
|
</div> |
|
|
|
<div class="menu-item"> |
|
Item |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Modal from "bootstrap/js/src/modal"; |
|
|
|
export default { |
|
name: "MenuBar", |
|
methods: { |
|
openModal(modalname) { |
|
const modal = new Modal(document.getElementById(modalname)) |
|
modal.toggle(); |
|
} |
|
}, |
|
computed: {} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
#menu-bar { |
|
margin: 0; |
|
position: fixed; |
|
bottom: 0; |
|
width: 100%; |
|
height: 5em; |
|
background-color: white; |
|
border-radius: 15px; |
|
border-bottom: none !important; |
|
} |
|
|
|
.menu-item, .menu-center { |
|
width: 18%; |
|
display: inline-block; |
|
margin: 0 auto; |
|
|
|
text-align: center; |
|
vertical-align: middle; |
|
font-size: 100%; |
|
} |
|
|
|
.menu-center { |
|
width: 25%; |
|
text-align: center; |
|
} |
|
|
|
.menu-item, .menu-center { |
|
margin: auto; |
|
} |
|
</style> |