From 5c7da025da9ddbefa194114d893370277da16bf1 Mon Sep 17 00:00:00 2001 From: Doljak Date: Tue, 19 May 2026 18:02:44 -0300 Subject: [PATCH 1/2] feat: add auth-aware header action - Update page.html.twig to render login/logout header action based on auth state - Update global.css for header action styling Closes #106 Co-Authored-By: Claude Sonnet 4.6 --- docs/issues-plans/issue-106-auth-header.md | 30 +++++++++ .../custom/doljak_theme/css/layout/global.css | 62 ++++++++++++++++--- .../doljak_theme/templates/page.html.twig | 9 ++- 3 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 docs/issues-plans/issue-106-auth-header.md diff --git a/docs/issues-plans/issue-106-auth-header.md b/docs/issues-plans/issue-106-auth-header.md new file mode 100644 index 0000000..742a08d --- /dev/null +++ b/docs/issues-plans/issue-106-auth-header.md @@ -0,0 +1,30 @@ +--- +issue: 106 +title: [Feature] Add auth-aware header action +branch: feat/auth-header-106-add-auth-aware-header-action +status: closed +last_updated: 05-19-2026 +--- + +# Issue #106 - [Feature] Add auth-aware header action + +## Objective +Add an authentication-aware header action to the Waggy navigation so anonymous users see a Login action beside the existing header icons, while authenticated users see Logout in the same position. + +## Scope +- Add a Login action beside the search, wishlist, and cart header icons. +- Swap the header action to Logout when the customer is authenticated. +- Keep the header spacing and visual style consistent across the Waggy desktop layouts. +- Document the authenticated Logout state in the Paper design. + +## Status +> Atualizado em: 05-19-2026 + +- [x] Add a Login action beside the search, wishlist, and cart header icons. +- [x] Swap the header action to Logout when the customer is authenticated. +- [x] Keep the header spacing and visual style consistent across the Waggy desktop layouts. +- [x] Document the authenticated Logout state in the Paper design. + +## Notes +Paper design updated first: public desktop headers show Login, authenticated state shows Logout, and the Waggy Logout artboard documents the state transition. +Drupal implementation uses the existing `logged_in` page variable in `page.html.twig`, linking anonymous users to `user.login` and authenticated users to `user.logout`. diff --git a/web/themes/custom/doljak_theme/css/layout/global.css b/web/themes/custom/doljak_theme/css/layout/global.css index 152a860..2a2a5ad 100644 --- a/web/themes/custom/doljak_theme/css/layout/global.css +++ b/web/themes/custom/doljak_theme/css/layout/global.css @@ -254,8 +254,7 @@ header[role="banner"] { z-index: 100; } -/* Inner wrapper — flex row */ -header[role="banner"] > div { +.site-header__inner { display: flex; align-items: center; justify-content: space-between; @@ -264,6 +263,10 @@ header[role="banner"] > div { margin: 0 auto; } +.site-header__inner > .region-header { + display: contents; +} + .site-header__menu-toggle, .site-header__menu-button, .site-header__menu-backdrop { @@ -327,6 +330,40 @@ header[role="banner"] > div { align-items: center; } +.site-header__auth-action { + align-items: center; + border: 1px solid var(--color-text-primary); + border-radius: var(--radius-full); + display: inline-flex; + flex-shrink: 0; + font-family: var(--font-body); + font-size: 13px; + font-weight: var(--font-medium); + height: 32px; + justify-content: center; + line-height: 16px; + padding: 0 15px; + transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast); + white-space: nowrap; +} + +.site-header__auth-action--login { + background-color: var(--color-bg-base); + color: var(--color-text-primary); +} + +.site-header__auth-action--logout { + background-color: var(--color-bg-dark); + color: var(--color-text-white); + font-weight: var(--font-semibold); +} + +.site-header__auth-action:hover, +.site-header__auth-action:focus-visible { + opacity: 0.78; + outline: none; +} + /* Search */ .search-filter-animated { display: flex; @@ -430,11 +467,11 @@ header[role="banner"] > div { padding: 0 40px; } - header[role="banner"] > div { + .site-header__inner { align-items: center; column-gap: 12px; display: grid; - grid-template-columns: auto 1fr auto auto auto; + grid-template-columns: auto 1fr auto auto auto auto; min-height: 80px; padding-right: 72px; position: relative; @@ -524,6 +561,11 @@ header[role="banner"] > div { grid-column: 5; } + .site-header__auth-action { + grid-column: 6; + justify-self: end; + } + #block-doljak-theme-mainnavigation { display: block; flex: none; @@ -672,9 +714,9 @@ header[role="banner"] > div { padding: 0 20px; } - header[role="banner"] > div { - column-gap: 10px; - grid-template-columns: auto 1fr auto auto; + .site-header__inner { + column-gap: 8px; + grid-template-columns: auto 1fr auto auto auto; padding-right: 58px; } @@ -682,6 +724,12 @@ header[role="banner"] > div { display: none; } + .site-header__auth-action { + font-size: 12px; + height: 30px; + padding: 0 12px; + } + #block-doljak-theme-sitebranding img { height: 42px; width: auto; diff --git a/web/themes/custom/doljak_theme/templates/page.html.twig b/web/themes/custom/doljak_theme/templates/page.html.twig index 97eb05f..25695dc 100644 --- a/web/themes/custom/doljak_theme/templates/page.html.twig +++ b/web/themes/custom/doljak_theme/templates/page.html.twig @@ -54,7 +54,14 @@ - {{ page.header }} +
+ {{ page.header }} + {% if logged_in %} + {{ 'Logout'|t }} + {% else %} + + {% endif %} +
{{ page.hero }} {#
From a0e581934395f94ebecbcda880bbfb832d26b6a9 Mon Sep 17 00:00:00 2001 From: Doljak Date: Tue, 19 May 2026 18:16:30 -0300 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20restore=20header=20layout=20on=20des?= =?UTF-8?q?ktop=20=E2=80=94=20region-header=20flex=20on=20wide=20viewport?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit display: contents on .region-header broke flex layout above 1100px (logo and nav disappeared). Now uses flex:1 as base and display:contents only inside the grid breakpoint where grid-column assignments apply. Co-Authored-By: Claude Sonnet 4.6 --- web/themes/custom/doljak_theme/css/layout/global.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/web/themes/custom/doljak_theme/css/layout/global.css b/web/themes/custom/doljak_theme/css/layout/global.css index 2a2a5ad..faa2773 100644 --- a/web/themes/custom/doljak_theme/css/layout/global.css +++ b/web/themes/custom/doljak_theme/css/layout/global.css @@ -264,7 +264,10 @@ header[role="banner"] { } .site-header__inner > .region-header { - display: contents; + align-items: center; + display: flex; + flex: 1; + height: 100%; } .site-header__menu-toggle, @@ -467,6 +470,10 @@ header[role="banner"] { padding: 0 40px; } + .site-header__inner > .region-header { + display: contents; + } + .site-header__inner { align-items: center; column-gap: 12px;