74 lines
8.5 KiB
HTML
74 lines
8.5 KiB
HTML
{# Customer profile dropdown in the storefront navbar.
|
|
|
|
Proper Penguin UI dropdown: behaviour is the vendored
|
|
dropdowns/dropdown-with-icons.html verbatim (isOpen / openedWithKeyboard,
|
|
x-trap + $focus keyboard nav, x-cloak x-show, @click.outside). Trigger is the
|
|
round initials avatar (avatar-with-initials.html, primary variant). Menu items
|
|
are our account links.
|
|
|
|
Needs the Alpine Focus plugin (loaded before Alpine core in base.html) for
|
|
x-trap / $focus. Self-contained Alpine state; the host only needs to place it
|
|
in the navbar flex row. The panel has NO id on purpose — an id would make htmx
|
|
hx-boost "settle" it across boosted navigations and reappear; id-less Penguin
|
|
dropdowns are unaffected. #}
|
|
|
|
{# initials from the full 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 %}
|
|
|
|
{% set _person_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-5"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/></svg>' %}
|
|
|
|
<div x-data="{ isOpen: false, openedWithKeyboard: false }"
|
|
x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false"
|
|
class="relative">
|
|
<!-- Toggle Button: round initials avatar -->
|
|
<button type="button" x-on:click="isOpen = ! isOpen"
|
|
x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true"
|
|
x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true"
|
|
aria-label="{{ t(key='nav-account', lang=lang | default(value='sk')) }}"
|
|
class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-sm font-bold tracking-wider text-on-primary/90 transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90 dark:focus-visible:outline-primary-dark">
|
|
{%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
|
|
</button>
|
|
<!-- Dropdown Menu (positioned like the settings cog: right-0 mt-2) -->
|
|
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard"
|
|
x-on:click.outside="isOpen = false, openedWithKeyboard = false"
|
|
x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()"
|
|
class="absolute right-0 mt-2 flex w-60 min-w-48 flex-col divide-y divide-outline overflow-hidden rounded-radius border border-outline bg-surface-alt shadow-lg dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
|
|
<!-- header: avatar + name + account type -->
|
|
<div class="flex items-center gap-3 px-4 py-2.5">
|
|
<span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-base font-bold tracking-wider text-on-primary/90 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90">
|
|
{%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
|
|
</span>
|
|
<div class="flex min-w-0 flex-col">
|
|
<span class="truncate text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ _name }}</span>
|
|
<p class="truncate text-xs text-on-surface dark:text-on-surface-dark">{{ _type_label }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- account links (with icons) -->
|
|
<div class="flex flex-col py-1.5">
|
|
<a href="/account/orders" data-nav="/account/orders" role="menuitem" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path d="M5.566 4.657A4.505 4.505 0 016.75 4.5h10.5c.41 0 .806.055 1.183.157A3 3 0 0015.75 3h-7.5a3 3 0 00-2.684 1.657zM2.25 9a3 3 0 013-3h13.5a3 3 0 013 3v.776a48.485 48.485 0 00-18 0V9zM18.75 11.25a47.97 47.97 0 00-13.5 0c-1.31.176-2.25 1.32-2.25 2.625V18a3 3 0 003 3h12a3 3 0 003-3v-4.125c0-1.305-.94-2.45-2.25-2.625z"/></svg>
|
|
{{ t(key="account-orders", lang=lang | default(value='sk')) }}
|
|
</a>
|
|
<a href="/account/profile" data-nav="/account/profile" role="menuitem" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/></svg>
|
|
{{ t(key="profile-title", lang=lang | default(value='sk')) }}
|
|
</a>
|
|
<a href="/account/password" data-nav="/account/password" role="menuitem" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path fill-rule="evenodd" d="M15.75 1.5a6.75 6.75 0 00-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 00-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 00.75-.75v-1.5h1.5A.75.75 0 009 21v-1.5h1.5a.75.75 0 00.53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1015.75 1.5zm0 3a.75.75 0 000 1.5A2.25 2.25 0 0118 8.25a.75.75 0 001.5 0 3.75 3.75 0 00-3.75-3.75z" clip-rule="evenodd"/></svg>
|
|
{{ t(key="account-change-password", lang=lang | default(value='sk')) }}
|
|
</a>
|
|
</div>
|
|
<!-- logout -->
|
|
<div class="flex flex-col py-1.5">
|
|
<form method="post" action="/logout" hx-boost="false"><button type="submit" role="menuitem" class="flex w-full items-center gap-2 bg-surface-alt px-4 py-2 text-left text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path fill-rule="evenodd" d="M7.5 3.75A1.5 1.5 0 006 5.25v13.5a1.5 1.5 0 001.5 1.5h6a1.5 1.5 0 001.5-1.5V15a.75.75 0 011.5 0v3.75a3 3 0 01-3 3h-6a3 3 0 01-3-3V5.25a3 3 0 013-3h6a3 3 0 013 3V9A.75.75 0 0115 9V5.25a1.5 1.5 0 00-1.5-1.5h-6zm10.72 4.72a.75.75 0 011.06 0l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 11-1.06-1.06l1.72-1.72H9a.75.75 0 010-1.5h10.94l-1.72-1.72a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
|
|
{{ t(key="logout", lang=lang | default(value='sk')) }}
|
|
</button></form>
|
|
</div>
|
|
</div>
|
|
</div>
|