mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 09:05:30 +00:00
71 lines
3.1 KiB
Plaintext
71 lines
3.1 KiB
Plaintext
|
|
{{- /* Shared two-column layout with scrollspy navigation for agent pages */ -}}
|
|
{{- $agents := .Agents -}}
|
|
{{- $sorted := .Sorted -}}
|
|
|
|
<div class="hidden xl:block w-96 flex-shrink-0">
|
|
<div class="sticky top-0 max-h-screen flex flex-col">
|
|
<!-- Compact header for xl+ screens -->
|
|
<div class="px-3 pb-4 border-b border-gray-200 bg-slate-50 rounded-t py-8">
|
|
{{ if eq .Search "autoren" }}
|
|
<h2 class="text-2xl font-bold font-serif text-gray-900 mb-1">Beiträger</h2>
|
|
<p class="text-base text-gray-600 mb-3">Personen, die Beiträge in der Zeitung verfasst haben</p>
|
|
{{ else }}
|
|
<h2 class="text-2xl font-bold font-serif text-gray-900 mb-1">Personen</h2>
|
|
<p class="text-base text-gray-600 mb-3">Verzeichnis aller in der Zeitung erwähnten Personen und Institutionen</p>
|
|
{{ end }}
|
|
|
|
<!-- Compact checkbox with scroll to top button -->
|
|
<div class="flex items-center justify-between">
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox"
|
|
class="form-checkbox h-5 w-5 text-red-600 focus:ring-red-500 focus:border-red-500 checked:bg-red-600 checked:border-red-600 rounded"
|
|
{{ if eq .Search "autoren" }}checked{{ end }}
|
|
autocomplete="off"
|
|
hx-get="{{ if eq .Search "autoren" }}/akteure/a{{ else }}/akteure/autoren{{ end }}"
|
|
hx-select="main"
|
|
hx-target="main"
|
|
hx-swap="innerHTML show:window:top focus-scroll:false"
|
|
hx-push-url="true">
|
|
<span class="ml-2 text-base text-gray-700">Nur Beiträger anzeigen</span>
|
|
</label>
|
|
|
|
<!-- Scroll to top button -->
|
|
<button id="sidebar-scroll-to-top"
|
|
onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
|
|
class="opacity-0 transition-opacity duration-300 {{ if eq .Search "autoren" }}w-8 h-8{{ else }}w-12 h-8 pr-1{{ end }} bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded-full flex items-center justify-center cursor-pointer"
|
|
title="Nach oben scrollen">
|
|
{{ if eq .Search "autoren" }}
|
|
<i class="ri-arrow-up-line text-lg font-bold"></i>
|
|
{{ else }}
|
|
<div class="flex items-center gap-1">
|
|
<i class="ri-arrow-up-line text-sm font-bold"></i>
|
|
<span class="text-xs font-bold">A-Z</span>
|
|
</div>
|
|
{{ end }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex-1 py-4 overflow-y-auto overscroll-contain relative bg-white rounded-b" id="scrollspy-nav">
|
|
<!-- Sliding red background element -->
|
|
<div id="scrollspy-slider" class="absolute bg-red-100 rounded-sm transition-all duration-300 ease-out opacity-0 z-0" style="width: calc(100% - 1.5rem); height: 0; top: 0; left: 0.75rem;"></div>
|
|
|
|
{{ range $_, $id := $sorted }}
|
|
{{ $a := index $agents $id }}
|
|
<div class="mx-3">
|
|
<a href="#author-{{ $id }}"
|
|
class="block px-2 py-0.5 text-gray-900 scrollspy-link no-underline box-content relative z-10 scrollspy-hover"
|
|
data-target="author-{{ $id }}">
|
|
{{ index $a.Names 0 }}
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Akteure Scrollspy Web Component -->
|
|
<akteure-scrollspy></akteure-scrollspy>
|
|
|