63 lines
5.1 KiB
HTML
63 lines
5.1 KiB
HTML
{# Site-wide category menu, served as an htmx partial and swapped into the
|
|
<aside> in base.html. `category_groups` is a two-level list of top-level
|
|
categories, each `{ name, slug, children: [{ name, slug }] }`. A category
|
|
with children is expandable (accordion); one without is a plain link.
|
|
Active state is set client-side by markActiveNav() via data-nav +
|
|
aria-current; groups auto-expand when the current page is the category or
|
|
one of its subcategories.
|
|
|
|
Adapted from the vendored Penguin UI component
|
|
penguinui-components/sidebar/sidebar-with-collapsible-menus.html: Penguin's
|
|
link treatment + active state + chevron-down rotation. Deviations: the group
|
|
row keeps our link + toggle split (categories are navigable, not just
|
|
expandable), and we use x-show/x-transition instead of upstream's x-collapse
|
|
(that Alpine plugin isn't bundled in our build). #}
|
|
<p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
|
|
{{ t(key="categories", lang=lang | default(value='sk')) }}
|
|
</p>
|
|
<div class="flex flex-col gap-1">
|
|
<a href="/shop" data-nav="/shop"
|
|
class="flex items-center gap-2 rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
|
|
{{ t(key="all-products", lang=lang | default(value='sk')) }}
|
|
</a>
|
|
{% for group in category_groups %}
|
|
{% if group.children | length > 0 %}
|
|
<div x-data="{ open: false }" class="flex flex-col"
|
|
x-init="open = ['{{ group.slug }}'{% for child in group.children %}, '{{ child.slug }}'{% endfor %}].some(s => location.pathname === '/category/' + s)">
|
|
<div class="flex items-stretch">
|
|
<a href="/category/{{ group.slug }}" data-nav="/category/{{ group.slug }}"
|
|
class="flex flex-1 items-center gap-2 truncate rounded-l-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
|
|
{{ group.name }}
|
|
</a>
|
|
<button type="button" x-on:click="open = ! open" x-bind:aria-expanded="open ? 'true' : 'false'"
|
|
aria-label="{{ group.name }}"
|
|
class="inline-flex w-8 shrink-0 items-center justify-center rounded-r-radius text-on-surface/60 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark/60 dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
|
class="size-5 shrink-0 transition-transform rotate-0" x-bind:class="open ? 'rotate-180' : 'rotate-0'" aria-hidden="true">
|
|
<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>
|
|
<ul x-show="open" x-cloak x-transition class="ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-outline pl-1 dark:border-outline-dark">
|
|
{% for child in group.children %}
|
|
<li>
|
|
<a href="/category/{{ child.slug }}" data-nav="/category/{{ child.slug }}"
|
|
class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
|
|
{{ child.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% else %}
|
|
<a href="/category/{{ group.slug }}" data-nav="/category/{{ group.slug }}"
|
|
class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
|
|
{{ group.name }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% if category_groups | length == 0 %}
|
|
<p class="px-2 py-2 text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="shop-empty", lang=lang | default(value='sk')) }}</p>
|
|
{% endif %}
|