Skip to content

feat: add auth-aware header action #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
doljak merged 1 commit into from
May 19, 2026
Merged

feat: add auth-aware header action #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/issues-plans/issue-106-auth-header.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.
62 changes: 55 additions & 7 deletions web/themes/custom/doljak_theme/css/layout/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -672,16 +714,22 @@ 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;
}

#block-contact-link-header {
display: none;
}

.site-header__auth-action {
font-size: 12px;
height: 30px;
padding: 0 12px;
}

#block-doljak-theme-sitebranding img {
height: 42px;
width: auto;
Expand Down
9 changes: 8 additions & 1 deletion web/themes/custom/doljak_theme/templates/page.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,14 @@
<span class="visually-hidden">Toggle navigation menu</span>
</label>
<label for="header-menu-toggle" class="site-header__menu-backdrop" aria-hidden="true"></label>
{{ page.header }}
<div class="site-header__inner">
{{ page.header }}
{% if logged_in %}
<a class="site-header__auth-action site-header__auth-action--logout" href="{{ path('user.logout') }}" aria-label="{{ 'Logout from your account'|t }}">{{ 'Logout'|t }}</a>
{% else %}
<a class="site-header__auth-action site-header__auth-action--login" href="{{ path('user.login') }}" aria-label="{{ 'Login to your account'|t }}">{{ 'Login'|t }}</a>
{% endif %}
</div>
</header>
{{ page.hero }}
{# <section class="wrapper-hero">
Expand Down
Loading