feat: offcanvas mobile navigation with user avatar and admin bar fix (v1.0.11)
All checks were successful
Create Release Package / PHP Lint (push) Successful in 1m13s
Create Release Package / Build Release (push) Successful in 1m56s

Switch mobile nav from collapse to offcanvas, add logged-in user avatar
and My Account link to offcanvas header, move dark mode toggle to
offcanvas footer. Fix admin bar overlapping offcanvas via inline CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 21:38:42 +01:00
parent 0902c5e1a5
commit 77778860ab
7 changed files with 96 additions and 8 deletions

View File

@@ -15,7 +15,14 @@
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvas"
aria-labelledby="navbarOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="navbarOffcanvasLabel">{{ site.name }}</h5>
{% 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>
@@ -54,12 +61,19 @@
{% endif %}
{% endfor %}
</ul>
{% if dark_mode %}
{% include 'partials/dark-mode-toggle.html.twig' %}
{% endif %}
</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>