farm-fresh/src/components/MenuBar.vue

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