siimee/frontend/src/components/MainNav.vue

<template lang="pug">
w-toolbar.mt6.py1(bottom fixed)
    router-link.w-flex.column(:to='`/`')
        w-button.pa8(bg-color='primary')
            w-icon.mr1.icon-home(xl)
    router-link.w-flex.column(:to='`/pairs`')
        w-button.pa8(bg-color='primary')
            w-icon.mr1.icon-people(xl)
            //- p.text-upper pending matches
    router-link.w-flex.column(:to='`/messages`')
        w-button.pa8(bg-color='primary')
            w-icon.mr1.icon-chat(xl)
            //- p.text-upper active chats
    router-link.w-flex.column(:to='`/onboarding`')
        w-button.pa8(bg-color='primary')
            w-icon.mr1.icon-area-graph(xl)
            //- p.text-upper survey
    router-link.w-flex.column(:to='`/settings`')
        w-button.pa8(bg-color='primary' disabled)
            w-icon.mr1.icon-cog(xl)
            //- p.text-upper settings
</template>

<script>
import '@mdi/font/css/materialdesignicons.min.css'

export default {
    name: 'MainNav',
}
</script>

<style lang="sass">
.w-toolbar
    max-width: 960px
    width:100%
    margin: auto
</style>