filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small fixes

Browse Source
This commit is contained in:
Priec
2026-07-29 20:44:03 +02:00
parent 0e284dbf07
commit aac19831e3
5 changed files with 64 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/views/shop/_sidebar.html
View File

@@ -3,8 +3,10 @@
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.
aria-current; groups auto-expand when the current page is the category, one
of its subcategories, or a product inside it (which markActiveNav announces
as window.activeCategory + the `nav-category` event, since this partial is
hx-preserve'd and therefore only ever initialises once).
Adapted from the vendored Penguin UI component
penguinui-components/sidebar/sidebar-with-collapsible-menus.html: Penguin's
@@ -27,8 +29,10 @@
</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 flex-col"
x-data="{ open: false, slugs: ['{{ group.slug }}'{% for child in group.children %}, '{{ child.slug }}'{% endfor %}] }"
x-init="open = slugs.some(s => location.pathname === '/category/' + s) || slugs.includes(window.activeCategory)"
x-on:nav-category.window="if (slugs.includes($event.detail)) open = true">
<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-cta aria-[current=page]:text-on-cta aria-[current=page]:font-semibold aria-[current=page]:shadow-sm dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-cta-dark dark:aria-[current=page]:text-on-cta-dark">