28 lines
1.9 KiB
HTML
28 lines
1.9 KiB
HTML
{# Site-wide category sidebar contents, served as an htmx partial and swapped
|
|
into the <aside> in base.html. `category_tree` is a depth-ordered flat list
|
|
of { name, slug, depth }; nesting is shown via left indentation. Active state
|
|
is set client-side by markActiveNav() via data-nav + aria-current. #}
|
|
<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 item in category_tree %}
|
|
<li>
|
|
<a href="/category/{{ item.slug }}" data-nav="/category/{{ item.slug }}" style="padding-left: {{ 12 + item.depth * 16 }}px"
|
|
class="flex items-center gap-1.5 rounded-radius py-1.5 pr-3 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">
|
|
{% if item.depth > 0 %}<span class="text-on-surface/40 dark:text-on-surface-dark/40">↳</span>{% endif %}
|
|
<span class="truncate">{{ item.name }}</span>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% if category_tree | 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 %}
|