Part-DB.Part-DB-server/templates/_navbar.html.twig

{% import "helper.twig" as helper %}

<nav class="navbar navbar-expand-md bg-body-tertiary border-bottom shadow-sm fixed-top py-0" id="navbar">
    <div class="container-fluid">
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#sidebar-container">
            <span class="visually-hidden">{% trans %}sidebar.toggle{% endtrans %}</span>
            <!-- <span class="navbar-toggler-icon"></span> -->
            <i class="fas fa-folder-open fa-lg fa-fw"></i>
        </button>

        <a class="navbar-brand" href="{{ path('homepage') }}"><i class="fa fa-microchip"
                                                                 aria-hidden="true"></i> {{ partdb_title }}</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <!-- <span class="navbar-toggler-icon"></span> -->
            <i class="fas fa-bars  fa-lg"></i>
        </button>


        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto">
                {% if is_granted("@tools.label_scanner") %}
                    <li class="nav-item">
                        <a class="nav-link"
                           href="{{ path("scan_dialog") }}">{% trans %}navbar.scanner.link{% endtrans %}</a>
                    </li>
                {% endif %}
            </ul>

            {% if is_granted('@parts.read') %}
                {% include "_navbar_search.html.twig" %}
            {% endif %}


            <ul class="navbar-nav ms-3" id="login-content">
                <li class="nav-item dropdown">
                    <a href="#" class="dropdown-toggle link-anchor nav-link" data-bs-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false" id="navbar-user-dropdown-btn" data-bs-reference="window">
                        {% if app.user %}<i class="fa fa-user" aria-hidden="true"></i>{% else %}<i class="far fa-user"
                                                                                                   aria-hidden="true"></i>{% endif %}
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-end" id="login-menu" aria-labelledby="navbar-user-dropdown-btn">
                        {% if app.user %}
                            <a class="dropdown-item disabled" href="#">{% trans %}user.loggedin.label{% endtrans %}
                               {{ helper.user_icon(app.user) }} <b>{{ app.user.firstName }} {{ app.user.lastName }}</b> (@{{ app.user.name }})</a>
                            <a class="dropdown-item" href="{{ path("user_settings") }}"><i class="fa fa-cogs fa-fw"
                                                                                           aria-hidden="true"></i> {% trans %}user.settings.label{% endtrans %}
                            </a>
                            <a class="dropdown-item" href="{{ path("user_info_self") }}"><i
                                        class="fa fa-info-circle fa-fw"
                                        aria-hidden="true"></i> {% trans %}user.info.label{% endtrans %}</a>
                            <li role="separator" class="dropdown-divider"></li>
                            <a class="dropdown-item" href="{{ path('logout') }}" data-turbo="false" data-turbo-frame="_top"><i
                                        class="fa fa-sign-out-alt fa-fw"
                                        aria-hidden="true"></i> {% trans %}user.logout{% endtrans %}</a>
                        {% else %}
                            <a class="dropdown-item"
                               href="{{ path('login', {'_target_path': app.request.pathinfo | remove_locale_from_path}) }}"
                               id="login-link"><i class="fa fa-sign-in-alt fa-fw"
                                                  aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
                        {% endif %}
                        <li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator"></li>
                        <div class="px-4 py-0 d-flex justify-content-between align-items-baseline">
                            <span>{% trans %}ui.toggle_darkmode{% endtrans %}</span>
                            <div class="btn-group" role="group" {{ stimulus_controller('common/darkmode') }}>
                                <input type="radio" class="btn-check" name="darkmode" id="darkmode-light" autocomplete="off" value="light">
                                <label class="btn btn-outline-secondary" for="darkmode-light" title="{% trans %}ui.darkmode.light{% endtrans %}"><i class="fa-solid fa-sun"></i></label>
                                <input type="radio" class="btn-check" name="darkmode" id="darkmode-dark" autocomplete="off" value="dark">
                                <label class="btn btn-outline-secondary" for="darkmode-dark" title="{% trans %}ui.darkmode.dark{% endtrans %}"><i class="fa-solid fa-moon"></i></label>
                                <input type="radio" class="btn-check" name="darkmode" id="darkmode-auto" autocomplete="off" value="auto" checked>
                                <label class="btn btn-outline-secondary" for="darkmode-auto" title="{% trans %}ui.darkmode.auto{% endtrans %}"><i class="fa-solid fa-circle-half-stroke"></i></label>
                            </div>
                        </div>
                        <li role="separator" class="dropdown-divider"></li>
                        <h6 class="dropdown-header">{% trans %}user.language_select{% endtrans %}</h6>
                        <div id="locale-select-menu">
                            {# This menu is filled by 'turbo/locale_menu' controller from the _turbo_control.html.twig template, to always have the correct path #}
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>