wp-bootstrap/views/partials/header-offcanvas.html.twig

<header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="{{ __('Primary navigation') }}">
        <div class="container">
            <a class="navbar-brand fw-bold" href="{{ site.url }}">
                {{ site.name }}
            </a>

            <button class="navbar-toggler" type="button"
                    data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas"
                    aria-controls="navbarOffcanvas"
                    aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvas"
                 aria-labelledby="navbarOffcanvasLabel">
                <div class="offcanvas-header">
                    {% if user.logged_in %}
                        <a href="{{ user.account_url }}" class="d-flex align-items-center text-decoration-none">
                            {{ user.avatar|raw }}
                            <span class="ms-2 fw-semibold">{{ user.display_name|esc_html }}</span>
                        </a>
                    {% else %}
                        <h5 class="offcanvas-title" id="navbarOffcanvasLabel">{{ site.name }}</h5>
                    {% endif %}
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                            aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        {% for item in menu %}
                            {% if item.children|length > 0 %}
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle{{ item.active ? ' active' : '' }}"
                                       href="{{ item.url }}" role="button"
                                       data-bs-toggle="dropdown" aria-expanded="false">
                                        {{ item.title }}
                                    </a>
                                    <ul class="dropdown-menu">
                                        {% for child in item.children %}
                                            <li>
                                                <a class="dropdown-item{{ child.active ? ' active' : '' }}"
                                                   href="{{ child.url }}"
                                                   {% if child.active %}aria-current="page"{% endif %}
                                                   {% if child.target %}target="{{ child.target }}"{% endif %}>
                                                    {{ child.title }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </li>
                            {% else %}
                                <li class="nav-item">
                                    <a class="nav-link{{ item.active ? ' active' : '' }}"
                                       href="{{ item.url }}"
                                       {% if item.active %}aria-current="page"{% endif %}
                                       {% if item.target %}target="{{ item.target }}"{% endif %}>
                                        {{ item.title }}
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                {% if dark_mode %}
                    <div class="offcanvas-footer d-lg-none border-top p-3">
                        {% include 'partials/dark-mode-toggle.html.twig' %}
                    </div>
                {% endif %}
            </div>

            {%- if dark_mode %}
                <div class="d-none d-lg-block ms-2">
                    {% include 'partials/dark-mode-toggle.html.twig' %}
                </div>
            {% endif %}
        </div>
    </nav>
</header>