61 lines
4.1 KiB
HTML
61 lines
4.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. #}
|
|
<p class="px-3 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>
|
|
<ul class="flex flex-col gap-0.5">
|
|
<li>
|
|
<a href="/shop" data-nav="/shop"
|
|
class="block rounded-radius px-3 py-1.5 text-sm font-medium text-on-surface transition hover:bg-surface hover:text-primary aria-[current=page]:bg-primary aria-[current=page]:text-on-primary dark:text-on-surface-dark dark:hover:bg-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:bg-primary-dark dark:aria-[current=page]:text-on-primary-dark">
|
|
{{ t(key="all-products", lang=lang | default(value='sk')) }}
|
|
</a>
|
|
</li>
|
|
{% for group in category_groups %}
|
|
{% if group.children | length > 0 %}
|
|
<li x-data="{ open: false }"
|
|
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-1 truncate rounded-l-radius px-3 py-1.5 text-sm font-medium text-on-surface transition hover:bg-surface hover:text-primary aria-[current=page]:bg-primary aria-[current=page]:text-on-primary dark:text-on-surface-dark dark:hover:bg-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:bg-primary-dark dark:aria-[current=page]:text-on-primary-dark">
|
|
{{ group.name }}
|
|
</a>
|
|
<button type="button" @click="open = !open" :aria-expanded="open"
|
|
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-surface hover:text-primary dark:text-on-surface-dark/60 dark:hover:bg-surface-dark dark:hover:text-primary-dark">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
|
class="size-4 transition-transform" :class="open && 'rotate-90'">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<ul x-show="open" x-cloak x-transition class="mt-0.5 flex flex-col gap-0.5">
|
|
{% for child in group.children %}
|
|
<li>
|
|
<a href="/category/{{ child.slug }}" data-nav="/category/{{ child.slug }}" style="padding-left: 28px"
|
|
class="flex items-center gap-1.5 rounded-radius py-1.5 pr-3 text-sm text-on-surface transition hover:bg-surface hover:text-primary aria-[current=page]:bg-primary aria-[current=page]:text-on-primary dark:text-on-surface-dark dark:hover:bg-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:bg-primary-dark dark:aria-[current=page]:text-on-primary-dark">
|
|
<span class="text-on-surface/40 dark:text-on-surface-dark/40">↳</span>
|
|
<span class="truncate">{{ child.name }}</span>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
{% else %}
|
|
<li>
|
|
<a href="/category/{{ group.slug }}" data-nav="/category/{{ group.slug }}"
|
|
class="block truncate rounded-radius px-3 py-1.5 text-sm font-medium text-on-surface transition hover:bg-surface hover:text-primary aria-[current=page]:bg-primary aria-[current=page]:text-on-primary dark:text-on-surface-dark dark:hover:bg-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:bg-primary-dark dark:aria-[current=page]:text-on-primary-dark">
|
|
{{ group.name }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
{% if category_groups | length == 0 %}
|
|
<p class="px-3 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 %}
|