siimee/frontend/src/components/MainNav.vue

<template lang="pug">
w-toolbar.mt6.py1.no-grow(bottom)
    router-link.w-flex.column(:to='`/chats`')
        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary' disabled)
            w-icon.mr1(xl) mdi mdi-forum
            p.text-upper chats
    router-link.w-flex.column(:to='`/matches`')
        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary')
            w-icon.mr1(xl) mdi mdi-tooltip-account
            p.text-upper matches
    router-link.w-flex.column(:to='`/`')
        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary')
            w-icon.mr1(xl) mdi mdi-home
            p.text-upper home
    router-link.w-flex.column(:to='`/survey`')
        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary')
            w-icon.mr1(xl) mdi mdi-account-check
            p.text-upper survey
    router-link.w-flex.column(:to='`/settings`')
        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary' disabled)
            w-icon.mr1(xl) mdi mdi-cog
            p.text-upper settings
</template>

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

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