Есть совершенно типовой код navbar bootstrap 4, на мобильных устройствах меню схлопытвается и показывается "бутерброд" с версией мобайл меню.
И всё прекрасно работало в классическом asp.net core приложении, а когда создал приложение на vue.js вылез вот какой неприятный глюк: нажимаешь на иконку меню, раскрывается пункт меню, кликаешь любой - происходит переход, но меню не сворачивается, продолжая загораживать добрую треть экрана.
Можно ли как-то это исправить?
Сам код:
<template>
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
<a href="/" class="navbar-brand">Home</a>
<router-link
to="/Transaction/Create"
class="nav-brand"
v-if="isAuthenticated"
>новая транзакция</router-link>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar1"
aria-controls="navbar1"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<menu-main/>
<menu-user/>
</div>
</nav>
</template>
<script>
import MenuMain from '@/components/MenuMain';
import MenuUser from '@/components/MenuUser';
import { mapGetters } from 'vuex';
export default {
name: 'Navigation',
components: {
MenuMain,
MenuUser,
},
computed: {
...mapGetters(['isAuthenticated']),
},
};
</script>