small fixes
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -3,6 +3,27 @@
|
||||
|
||||
{% block title %}{{ product.name }}{% endblock title %}
|
||||
|
||||
{# Keeps this product's category selected and expanded in the sidebar, which
|
||||
otherwise matches on the URL alone and so goes blank on /shop/{slug}. #}
|
||||
{% block nav_category %}{% if category %}{{ category.slug }}{% endif %}{% endblock nav_category %}
|
||||
|
||||
{# Same trail as the category listing, extended with the product itself, so the
|
||||
path back up the tree survives the click into a product. #}
|
||||
{% block breadcrumbs %}
|
||||
{% set L = lang | default(value='sk') %}
|
||||
<nav aria-label="breadcrumb" class="mb-5 text-sm">
|
||||
<ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
|
||||
{{ ui::crumb(label=t(key="nav-home", lang=L), href="/") }}
|
||||
{{ ui::crumb(label=t(key="nav-shop", lang=L), href="/shop") }}
|
||||
{% for crumb in breadcrumbs %}
|
||||
{{ ui::crumb(label=crumb.name, href="/category/" ~ crumb.slug) }}
|
||||
{% endfor %}
|
||||
{% if category %}{{ ui::crumb(label=category.name, href="/category/" ~ category.slug) }}{% endif %}
|
||||
{{ ui::crumb_current(label=product.name) }}
|
||||
</ol>
|
||||
</nav>
|
||||
{% endblock breadcrumbs %}
|
||||
|
||||
{% block content %}
|
||||
<div class="space-y-12">
|
||||
<div class="grid gap-10 lg:grid-cols-2">
|
||||
|
||||
Reference in New Issue
Block a user