Veutify нижняя навигация не работает на меньшем экране

Question

Я использую компонент Veutify в нижней части в своем веб-приложении. У меня есть несколько разделов, для которых мне нужны элементы навигации на нижней панели навигации. Я использую следующий компонент,

<template>
    <v-bottom-navigation
            :value="activeBtn"
            color="primary"
            horizontal
    >
        <v-btn>
            <span>Home</span>
            <v-icon class="material-icons">home</v-icon>
        </v-btn>

        <v-btn>
            <span>About</span>
            <v-icon class="material-icons">person_pin</v-icon>
        </v-btn>

        <v-btn>
            <span>Learn</span>
            <v-icon class="material-icons">school</v-icon>
        </v-btn>

        <v-btn>
            <span>Device</span>
            <v-icon class="material-icons">computer</v-icon>
        </v-btn>

        <v-btn>
            <span>Ideas</span>
            <v-icon class="material-icons">emoji_objects</v-icon>
        </v-btn>

        <v-btn>
            <span>Settings</span>
            <v-icon class="material-icons">settings</v-icon>
        </v-btn>


    </v-bottom-navigation>
</template>

<script>
    export default {
        name: "BottomNav",
        data() {
            return {
                activeBtn: 0,
            }
        },
    }
</script>

<style scoped>

</style>

Этот компонент используется в моем следующем приложении. vue

<template>
    <v-app id="app">
        <Header/>
        <v-content>
            <router-view/>
        </v-content>
        <BottomNav/>
    </v-app>
</template>

Это приводит к правильному нижнему меню на ноутбуке / рабочем столе следующим образом

Однако, когда я уменьшу размер экрана или увижу его на своем мобильном телефоне, он испортит макет, как показано ниже

Кто-нибудь знает, как с этим справиться? Я ожидал такого поведения, как Android нижняя навигация, т.е. скрытие меток и горизонтальная прокрутка. Но в текущей документации Veutify такая функция не упоминается.

Answer 1

Добавьте это внутри тега компонента <style> с нижней навигацией:

.v-bottom-navigation {
  justify-content: start;
  overflow-x: scroll;
}

Компонент v-bottom-navigation уже использует этот класс, поэтому нет необходимости добавлять его вручную.

Answer 2

Попробуйте вручную добавить свойство overflow-x: scroll; css к нижнему компоненту навигации.