diff --git a/CHANGELOG.md b/CHANGELOG.md index 235e970..2d848dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,22 @@ All notable changes to this project will be documented in this file. +## [1.0.11] - 2026-02-28 + +### Changed + +- **Offcanvas mobile navigation**: Default header now uses `header-offcanvas.html.twig` instead of `header.html.twig`. Mobile navigation slides in as an offcanvas panel from the right instead of collapsing downward. +- **User avatar in offcanvas header**: When logged in, the offcanvas header displays the user's Gravatar and display name linking to the WooCommerce My Account page (or WP admin profile as fallback). Falls back to the site name when logged out. +- **Dark mode toggle repositioned**: Moved from the offcanvas body to the offcanvas footer on mobile. Desktop toggle remains in the navbar. + +### Added + +- **User context data** (`inc/Template/ContextBuilder.php`): New `getUserData()` method exposing `user.logged_in`, `user.display_name`, `user.avatar`, and `user.account_url` to all Twig templates. + +### Fixed + +- **Admin bar overlapping offcanvas** (`functions.php`): Inline CSS via `wp_add_inline_style()` adds `padding-top` matching the admin bar height to `.offcanvas` when the admin bar is visible, preventing content overlap. + ## [1.0.10] - 2026-02-25 ### Fixed diff --git a/CLAUDE.md b/CLAUDE.md index 4737631..f3f3cfb 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -34,7 +34,7 @@ This project is proudly **"vibe-coded"** using Claude.AI - the entire codebase w **Note for AI Assistants:** Clean this section after the specific features are done or new releases are made. Effective changes are tracked in `CHANGELOG.md`. Do not add completed versions here - document them in the Session History section at the end of this file. -Current version is **v1.0.9**. See `PLAN.md` for details. +Current version is **v1.0.11**. See `PLAN.md` for details. ## Technical Stack @@ -234,6 +234,34 @@ Build steps (in order): ## Session History +### Session 17 — v1.0.11 Offcanvas Navigation & User Context (2026-02-28) + +**Completed:** Switched mobile navigation from Bootstrap collapse to offcanvas, added logged-in user context to the header, and fixed admin bar overlap. + +**What was changed:** + +- **Offcanvas navigation** (`views/base.html.twig`): Default header include switched from `partials/header.html.twig` (collapse) to `partials/header-offcanvas.html.twig` (offcanvas slide-in from right). The offcanvas variant already existed in the theme. +- **Offcanvas header with user avatar** (`views/partials/header-offcanvas.html.twig`): When logged in, the offcanvas header shows the user's Gravatar avatar and display name linking to the WooCommerce My Account page. Falls back to the site name when logged out. +- **Dark mode toggle repositioned**: Moved from the offcanvas body to the offcanvas footer (`d-lg-none`) on mobile. On desktop (≥lg), the toggle remains visible next to the navbar via a separate `d-none d-lg-block` wrapper. +- **User context in ContextBuilder** (`inc/Template/ContextBuilder.php`): New `getUserData()` method providing `user.logged_in`, `user.display_name`, `user.avatar` (rendered `` with `rounded-circle` class), and `user.account_url` (WooCommerce My Account or WP admin profile fallback). +- **Admin bar offcanvas overlap fix** (`functions.php`): Inline CSS injected via `wp_add_inline_style()` when `is_admin_bar_showing()` is true. Adds `padding-top: var(--wp-admin--admin-bar--height, 32px)` to `.offcanvas` so the offcanvas content clears the admin bar. + +**Files modified:** + +- `views/base.html.twig` — header include changed to offcanvas variant +- `views/partials/header-offcanvas.html.twig` — user avatar header, dark mode toggle in footer +- `inc/Template/ContextBuilder.php` — `getUserData()` method, `user` key in context +- `functions.php` — admin bar offcanvas padding inline style +- `style.css` — version bump to 1.0.11 +- `CHANGELOG.md` — v1.0.11 entry + +**Key learnings:** + +- Bootstrap offcanvas inside `navbar-expand-lg` uses `position: fixed; top: 0` which is covered by the WordPress admin bar (`z-index: 99999`). Since the offcanvas z-index (1045) is lower, adjusting `top` alone doesn't help visually — `padding-top` on the offcanvas content is the practical fix. +- `wp_add_inline_style()` bypasses file-level browser caching, making it more reliable for conditional CSS rules than editing the main stylesheet. +- WordPress's `--wp-admin--admin-bar--height` CSS custom property (set on `:root`) adjusts between 32px (desktop) and 46px (mobile ≤782px), making it the ideal value for admin bar offset calculations. +- `get_avatar()` accepts an `$args` array where CSS classes can be passed via the `class` key, avoiding post-processing of the HTML output. + ### Session 16 — v1.0.10 Title Double-Encoding Fix (2026-02-25) **Completed:** Fixed double-encoding of HTML entities in page titles rendered through Twig. diff --git a/functions.php b/functions.php index 3b80906..45fb503 100644 --- a/functions.php +++ b/functions.php @@ -83,6 +83,13 @@ if ( ! function_exists( 'wp_bootstrap_enqueue_scripts' ) ) : $theme_version ); + // Push offcanvas below the WP admin bar when logged in. + if ( is_admin_bar_showing() ) { + wp_add_inline_style( 'wp-bootstrap-style', + '.offcanvas { padding-top: var(--wp-admin--admin-bar--height, 32px); }' + ); + } + // Enqueue Bootstrap JS bundle (includes Popper). wp_enqueue_script( 'wp-bootstrap-js', diff --git a/inc/Template/ContextBuilder.php b/inc/Template/ContextBuilder.php index b0120dc..250122c 100644 --- a/inc/Template/ContextBuilder.php +++ b/inc/Template/ContextBuilder.php @@ -32,6 +32,7 @@ class ContextBuilder 'layout' => 'default', 'header_variant' => $this->getHeaderVariant(), 'footer_variant' => $this->getFooterVariant(), + 'user' => $this->getUserData(), ]; if (is_singular()) { @@ -93,6 +94,28 @@ class ContextBuilder ]; } + /** + * Get current user data for header/navigation. + */ + private function getUserData(): array + { + if (! is_user_logged_in()) { + return ['logged_in' => false]; + } + + $user = wp_get_current_user(); + $account_url = function_exists('wc_get_page_permalink') + ? wc_get_page_permalink('myaccount') + : admin_url('profile.php'); + + return [ + 'logged_in' => true, + 'display_name' => $user->display_name, + 'avatar' => get_avatar($user->ID, 32, '', '', ['class' => 'rounded-circle']), + 'account_url' => $account_url, + ]; + } + /** * Get navigation menu items for a location. */ diff --git a/style.css b/style.css index 86f9431..dd2c7a0 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ Description: A modern WordPress Block Theme built from scratch with Bootstrap 5. Requires at least: 6.7 Tested up to: 6.7 Requires PHP: 8.3 -Version: 1.0.10 +Version: 1.0.11 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wp-bootstrap diff --git a/views/base.html.twig b/views/base.html.twig index afbaae9..bfc7a72 100644 --- a/views/base.html.twig +++ b/views/base.html.twig @@ -11,7 +11,7 @@ {{ __('Skip to main content') }} {% block header %} - {% include 'partials/header.html.twig' %} + {% include 'partials/header-offcanvas.html.twig' %} {% endblock %}
diff --git a/views/partials/header-offcanvas.html.twig b/views/partials/header-offcanvas.html.twig index 381e6d5..47fb5df 100644 --- a/views/partials/header-offcanvas.html.twig +++ b/views/partials/header-offcanvas.html.twig @@ -15,7 +15,14 @@ + {% if dark_mode %} +
+ {% include 'partials/dark-mode-toggle.html.twig' %} +
+ {% endif %} + + {%- if dark_mode %} +
+ {% include 'partials/dark-mode-toggle.html.twig' %} +
+ {% endif %}