47 lines
4.7 KiB
HTML
47 lines
4.7 KiB
HTML
{# Customer profile dropdown shown in the storefront navbar next to the cart.
|
|
Trigger shows an initials avatar, the customer's name and their account type
|
|
(personal / company); clicking opens a quick-navigation menu.
|
|
|
|
The host template provides the wrapper
|
|
<div x-data="{ open: false }" @keydown.escape="open = false" class="relative">. #}
|
|
|
|
{# initials from the name, e.g. "Filip Priec" -> "FP" #}
|
|
{% set _name = customer_name | default(value='') | trim %}
|
|
{% set _parts = _name | split(pat=' ') %}
|
|
{% set _initials = _parts.0 | truncate(length=1, end='') | upper %}
|
|
{% if _parts | length > 1 %}{% set _second = _parts | last | truncate(length=1, end='') | upper %}{% set _initials = _initials ~ _second %}{% endif %}
|
|
{% if customer_account_type == "company" %}{% set _type_label = t(key="account-company", lang=lang | default(value='sk')) %}{% else %}{% set _type_label = t(key="account-personal", lang=lang | default(value='sk')) %}{% endif %}
|
|
|
|
<button type="button" @click="open = !open" :aria-expanded="open"
|
|
aria-label="{{ t(key='nav-account', lang=lang | default(value='sk')) }}"
|
|
class="flex items-center gap-2 rounded-radius border border-outline bg-surface-alt py-1 pl-1 pr-2 text-left transition hover:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:hover:border-primary-dark">
|
|
<span class="inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">{{ _initials }}</span>
|
|
<span class="hidden min-w-0 flex-col leading-tight sm:flex">
|
|
<span class="truncate text-xs font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ _name }}</span>
|
|
<span class="truncate text-[10px] text-on-surface/60 dark:text-on-surface-dark/60">{{ _type_label }}</span>
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="hidden size-4 text-on-surface/60 sm:block dark:text-on-surface-dark/60" :class="open && 'rotate-180'"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
|
|
</button>
|
|
|
|
<div x-show="open" x-cloak @click.outside="open = false" x-transition.origin.top.right
|
|
class="absolute right-0 mt-2 flex w-56 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt py-1 shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt"
|
|
role="menu">
|
|
<div class="flex items-center gap-3 border-b border-outline px-4 py-3 dark:border-outline-dark">
|
|
<span class="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-semibold text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">{{ _initials }}</span>
|
|
<span class="flex min-w-0 flex-col leading-tight">
|
|
<span class="truncate text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ _name }}</span>
|
|
<span class="truncate text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ _type_label }}</span>
|
|
</span>
|
|
</div>
|
|
<a href="/account/orders" data-nav="/account/orders" role="menuitem"
|
|
class="px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="account-orders", lang=lang | default(value='sk')) }}</a>
|
|
<a href="/account/profile" data-nav="/account/profile" role="menuitem"
|
|
class="px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="profile-title", lang=lang | default(value='sk')) }}</a>
|
|
<a href="/account/password" data-nav="/account/password" role="menuitem"
|
|
class="px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="account-change-password", lang=lang | default(value='sk')) }}</a>
|
|
<form method="post" action="/logout" hx-boost="false" class="border-t border-outline dark:border-outline-dark">
|
|
<button type="submit" role="menuitem"
|
|
class="block w-full px-4 py-2 text-left text-sm font-medium text-danger transition hover:bg-primary/5 focus-visible:bg-primary/10 focus-visible:outline-hidden">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
|
|
</form>
|
|
</div>
|