Возникла проблема при использовании bootstrap шаблона.
Есть navbar на котором стоит drop down menu, при первом нажатии оно отображается, а при следующих - нет. В чём может быть проблема? Для работы использую Laravel, файл app.js гружу через defer для работы списка, хотя он возможно не причём.
<ul class="navbar-nav ml-auto">
@guest
<li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
<li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" style="color: white;" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-right" href="{{ route('users.editprofile') }}">
{{ __('Edit Profile') }}
</a>
<a class="dropdown-item text-right" href="{{ route('cards.createcard') }}">
{{ __('Add card') }}
</a>
<hr>
<a class="dropdown-item text-right" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>