Как переместить навигационную ссылку в выпадающий список

Question

У меня есть раскрывающееся меню, в котором при нажатии на раскрывающееся меню отображается ссылка «Выйти». Я хочу добавить еще одну ссылку, которая называется "профиль", чтобы при нажатии на раскрывающееся меню он отображал как выход, так и профиль.

Я изо всех сил пытаюсь это сделать. У меня есть «профиль» сбоку на панели навигации, но я не могу получить вкладку профиля в go в раскрывающемся меню:

        <li class="nav-item dropdown">
        <a id="navbarDropdown" 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 dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" 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>
    </li>
    <li class="nav-item">
    <a class="nav-link " href="{{ route('product.shoppingCart')}}">Cart
    <span class = "badge badge-primary">{{ Session::has('cart') ? Session::get('cart')->totalQty : ''}}
    </a>
    </li>
    <li class="nav-item">
    <a class="nav-link " href="{{ route('posts.profile')}}">Profile
    </a>

</li>

Answer 1

Проблема в том, что вы должны поместить ссылку профиля внутри div с классом dropdown-menu и присвоить ему класс dropdown-item, вместо того, чтобы назначить ему класс nav-item и поместить его рядом с другими элементами панели навигации. , посетите https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Я должен сказать, что код navbar довольно неопрятен. Я попытался немного почистить и решил твою проблему. Вы открыли тег <div> для раскрывающегося меню и не закрыли его с помощью </div>.

<li class="nav-item dropdown">
    <a id="navbarDropdown" 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 dropdown-menu-right" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="{{ route('posts.profile')}}">Profile
        </a>
        <a class="dropdown-item" href="{{ route('logout') }}"
                   onclick="event.preventDefault();
                 document.getElementById('logout-form').submit();">
                {{ __('Logout') }}
        </a>
    </div>
    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
</li>

<li class="nav-item">
    <a class="nav-link " href="{{ route('product.shoppingCart')}}">Cart
        <span class = "badge badge-primary">{{ Session::has('cart') ? Session::get('cart')->totalQty : ''}}
    </a>
</li>

Answer 2

Только этот профиль в вашем выпадающем списке

<li class="nav-item dropdown">

<a id="navbarDropdown" class="nav-link dropdown-toggle" href="{{ route('posts.profile')}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>Profile
                </a>
                    <a id="navbarDropdown" 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 dropdown-menu-right" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" 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>
                </li>
                <li class="nav-item">
                <a class="nav-link " href="{{ route('product.shoppingCart')}}">Cart
                <span class = "badge badge-primary">{{ Session::has('cart') ? Session::get('cart')->totalQty : ''}}
                </a>
                </li>
                <li class="nav-item">


            </li>