4a54834424
- Create shared tab_bar.html partial with desktop + mobile layouts - Add CSS component classes (.tab, .tab-active, .tab-mobile variants) - Replace divergent implementations in data.html and add.html - Rename DataTab to Tab for shared use across templates - Improve readability: darker inactive text, more spacing, hover states
43 lines
2 KiB
HTML
43 lines
2 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
|
|
<div data-signals:{{ tab_signal }}="'{{ active_type }}'" data-signals:_tabs-open="false">
|
|
<!-- Desktop tabs -->
|
|
<nav class="hidden md:flex flex-wrap gap-1.5 p-2" role="tablist">
|
|
{% for tab in tabs %}
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
class="tab"
|
|
data-class:tab-active="{{ tab_signal_js }} === '{{ tab.key }}'"
|
|
data-on:click="{{ tab_signal_js }} = '{{ tab.key }}'{% if !tab_base_url.is_empty() %}; history.pushState(null, '', '{{ tab_base_url }}{{ tab.key }}'); @get('{{ tab_base_url }}{{ tab.key }}', {responseOverrides: {selector: '{{ tab_fetch_target }}', mode: '{{ tab_fetch_mode }}'}}){% endif %}"
|
|
>{{ tab.label }}</button>
|
|
{% endfor %}
|
|
</nav>
|
|
<!-- Mobile tab selector -->
|
|
<div class="md:hidden">
|
|
<button
|
|
type="button"
|
|
class="flex w-full items-center justify-between p-3 text-sm font-medium"
|
|
style="color: var(--text)"
|
|
data-on:click="$_tabsOpen = !$_tabsOpen"
|
|
>
|
|
<span>
|
|
{% for tab in tabs %}
|
|
<span data-show="{{ tab_signal_js }} === '{{ tab.key }}'">{{ tab.label }}</span>
|
|
{% endfor %}
|
|
</span>
|
|
<span data-show="!$_tabsOpen">{% call icons::chevron_down("h-5 w-5") %}</span>
|
|
<span data-show="$_tabsOpen" style="display:none">{% call icons::chevron_up("h-5 w-5") %}</span>
|
|
</button>
|
|
<div class="flex flex-col border-t" data-show="$_tabsOpen" style="display:none">
|
|
{% for tab in tabs %}
|
|
<button
|
|
type="button"
|
|
class="tab-mobile"
|
|
data-class:tab-mobile-active="{{ tab_signal_js }} === '{{ tab.key }}'"
|
|
data-on:click="{{ tab_signal_js }} = '{{ tab.key }}'; $_tabsOpen = false{% if !tab_base_url.is_empty() %}; history.pushState(null, '', '{{ tab_base_url }}{{ tab.key }}'); @get('{{ tab_base_url }}{{ tab.key }}', {responseOverrides: {selector: '{{ tab_fetch_target }}', mode: '{{ tab_fetch_mode }}'}}){% endif %}"
|
|
>{{ tab.label }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|