<template>
    <div class="row steel-border" id="menu-bar">
        <div class="menu-item">
            Item
        </div>

        <div class="menu-item">
            Item
        </div>

        <div class="menu-center">
            Center
        </div>

        <div class="menu-item">
            Item
        </div>

        <div class="menu-item">
            Item
        </div>
    </div>
</template>

<script>
export default {
    name: "MenuBar",
    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;
}

.menu-center {
    width: 25%;
    text-align: center;
}
</style>