Spookie/templates/themes/default/_header.html.twig

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top px-sm-5 border-0">

    <a class="navbar-brand border-0" href="{{ path('app_main') }}">
        <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 ms-auto">
            <!--
            <li>
                <form class="d-flex">
                    <input class="form-control me-2 my-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn" type="submit">Search</button>
                </form>
            </li>
            -->
            {% if is_granted('ROLE_USER') %}
                <li class="nav-item dropdown me-auto">
                    <button type="button" id="navbar-dropdown" data-bs-target="#dropdown-menu" data-bs-toggle="dropdown"
                            class="btn btn-outline-dark dropdown-toggle button-login">
                        {% if app.user.avatar %}
                            <img class="rounded-circle"
                                 width="50px"
                                 src="{{ avatar_asset(app.user.avatar)|imagine_filter('squared_thumbnail_small') }}"
                                 alt="profile image"/>
                        {% else %}
                            {{ app.user.username }}
                        {% endif %}
                    </button>

                    <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end" id="dropdown-menu"
                         aria-labelledby="navbar-dropdown">
                        <a class="dropdown-item" href="{{ path('app_profile_edit') }}">
                            <span class="fa fa-lg fa-fw fa-user" aria-hidden="true"></span>
                            Profile</a>
                        <a class="dropdown-item" href="#">
                            <span class="fa fa-lg fa-fw fa-wrench" 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="fa fa-lg fa-fw fa-cog" aria-hidden="true"></span>
                                Administration
                            </a>
                            <div class="dropdown-divider"></div>
                        {% endif %}

                        <a class="dropdown-item" href="{{ path('security_logout') }}">
                            <span class="fa fa-lg fa-fw fa-sign-out" aria-hidden="true"></span>&nbsp;
                            Logout
                        </a>
                    </div>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="btn btn-primary button-login" href="{{ path('security_login') }}" role="button"
                       id="buttonLogin">
                        <span class="fa fa-sign-in fa-lg fa-fw" aria-hidden="true"></span>Log In
                    </a>
                </li>
            {% endif %}
        </ul>
    </div>
</nav>