Spookie/templates/_header.html.twig

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top navbar-top">

    <a class="navbar-brand" href="{{ path('blogs') }}">
        <img src="{{ asset('build/images/24unix/24_logo_bg_64x64.png') }}" alt="24unix.net" id="site-logo">
    </a>

    <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#CollapsingNavbar">
        &#9776;
    </button>

    <div class="collapse navbar-collapse" id="CollapsingNavbar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown my-2 my-lg-0">
                <button type="button" id="navbar-dropdown" data-bs-target="#dropdown-menu" data-bs-toggle="dropdown"
                        class="btn btn-primary dropdown-toggle ml-auto button-login">
                    {{ app.user.username }}
                </button>

                {% if is_granted('ROLE_USER') %}
                <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end" id="dropdown-menu" aria-labelledby="navbar-dropdown">
                    <a class="dropdown-item" href="{{ path('user') }}">
                        <span class="fas fa-user" aria-hidden="true"></span>
                        Profile</a>
                    <a class="dropdown-item" href="#">
                        <span class="fas fa-cog" aria-hidden="true"></span>
                        Settings</a>
                    <div class="dropdown-divider"></div>
                    {% if is_granted('ROLE_ADMIN') %}
                        <a class="dropdown-item" href="{{ path('admin') }}">
                            <span class="fas fa-cog" aria-hidden="true"></span>
                            Administration
                        </a>
                        <div class="dropdown-divider"></div>
                    {% endif %}

                    <a class="dropdown-item" href="{{ path('app_logout') }}">
                        <span class="fas fa-sign-out-alt" aria-hidden="true"></span>
                        Logout
                    </a>
                </div>
            </li>
            {% else %}
                <li class="nav-item">
                    <a class="btn btn-primary button-login" href="{{ path('app_login') }}" role="button"
                       id="buttonLogin">
                        Login
                    </a>
                </li>
            {% endif %}

        </ul>
    </div>

</nav>