Htmx/templates/components/sheets.html

{% extends "base.html" %}

{% block title %}Slide-over Drawers (Sheets) - Design System Wiki{% endblock %}

{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
    
    <!-- Left Navigation Sidebar -->
    {% include "components/sidebar.html" %}

    <!-- Main Content -->
    <div class="flex-1 space-y-8">
        
        <!-- Header -->
        <div class="pb-6 border-b border-border">
            <span class="text-xs font-semibold text-indigo-400">Overlays</span>
            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Slide-over Drawers (Sheets)</h1>
            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
                Right-anchored slide-out sheets designed for detail inspections, metadata lists, settings panels, and form workflows.
            </p>
        </div>

        <!-- Section Sheets -->
        <section class="space-y-4">
            <h2 class="text-lg font-bold text-slate-200">Drawer Showcase & Integration</h2>
            
            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
                <!-- Tab Headers -->
                <div class="flex border-b border-border/60 pb-1.5">
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'sheet-sandbox')">Interactive Demo</button>
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'sheet-code')">HTML Markup</button>
                </div>
                
                <!-- Demo Viewport -->
                <div id="sheet-sandbox" class="wiki-pane py-2">
                    <button data-sheet-target="wiki-demo-sheet" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
                        Open Right Drawer
                    </button>
                </div>
                
                <!-- Code Snippet Area -->
                <div id="sheet-code" class="wiki-pane hidden space-y-4">
                    <div class="relative group">
                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                            Copy Code
                        </button>
                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Trigger Button (points to sheet element ID) --&gt;
&lt;button data-sheet-target="my-sheet-id" class="px-4 py-2 bg-indigo-650 text-white text-xs font-bold rounded-xl"&gt;
    Open Drawer
&lt;/button&gt;

&lt;!-- Slide Drawer Sheet Element --&gt;
&lt;div id="my-sheet-id" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true"&gt;
    &lt;!-- Backdrop --&gt;
    &lt;div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300"&gt;&lt;/div&gt;
    
    &lt;div class="absolute inset-y-0 right-0 max-w-full flex pl-10"&gt;
        &lt;!-- Panel with transition translate-x-full --&gt;
        &lt;div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 bg-popover/95 border-l border-border p-6 flex flex-col justify-between"&gt;
            &lt;div class="space-y-4"&gt;
                &lt;div class="flex items-center justify-between pb-3 border-b border-border"&gt;
                    &lt;h3 class="text-sm font-bold text-slate-100"&gt;Settings&lt;/h3&gt;
                    &lt;button class="sheet-close text-slate-500 hover:text-white"&gt;
                        &lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;&lt;path d="M6 18L18 6M6 6l12 12"/&gt;&lt;/svg&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
                &lt;p class="text-xs text-muted-foreground"&gt;Drawer Body Content&lt;/p&gt;
            &lt;/div&gt;
            &lt;button class="sheet-close w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-xl"&gt;
                Save
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Global JS Bindings Documentation -->
        <section class="space-y-4 border-t border-border/60 pt-6">
            <h2 class="text-lg font-bold text-slate-200">How the Global Sheet JS Works</h2>
            <p class="text-xs text-muted-foreground leading-relaxed">
                The global script <code>components.js</code> monitors specific attributes and classes on page load. Here is the operational contract for sheets:
            </p>
            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
                <table class="w-full border-collapse text-left text-xs">
                    <thead>
                        <tr class="border-b border-border text-muted-foreground font-bold">
                            <th class="pb-2.5 w-1/4">Selector / Class</th>
                            <th class="pb-2.5 w-1/4">Type</th>
                            <th class="pb-2.5">Behavior & Purpose</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">[data-sheet-target]</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
                            <td class="py-3 text-slate-400">
                                Applied to buttons or triggers. The value must match the ID of the sheet container (e.g., <code>data-sheet-target="my-sheet"</code>). Clicking it triggers <code>openSheet("my-sheet")</code>.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-dialog</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The outer wrapper sheet container. Starts with the class <code>hidden</code>. Toggled by the script.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-content</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The inner slide-over panel card. The JS toggles transition translation classes (removes <code>translate-x-full</code> and adds <code>translate-x-0</code> on show).
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-backdrop</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The backdrop overlay. The JS toggles its opacity and registers clicks on it to automatically close the sheet.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-close</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Applied to close trigger buttons. Clicking any element with this class closes the sheet.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
                <p class="text-slate-400 leading-normal">
                    You can freely style the placement, width, colors, borders, and contents of the <code>.sheet-content</code> slide-out panel. The functional slide classes (<code>translate-x-full</code> and <code>translate-x-0</code>) and semantic structure class names must be preserved so the script can locate and slide the sheets dynamically.
                </p>
            </div>
        </section>

    </div>
</div>

<!-- Interactive Sheet Sandbox Element -->
<div id="wiki-demo-sheet" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
    <div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
    <div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
        <div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 ease-in-out border-l border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col justify-between">
            <div class="space-y-4">
                <div class="flex items-center justify-between pb-3 border-b border-border">
                    <h3 class="text-sm font-bold text-slate-100">Drawer Panel Properties</h3>
                    <button class="sheet-close text-slate-500 hover:text-white rounded-lg p-1.5 hover:bg-secondary transition">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
            </div>
            <button class="sheet-close w-full py-2.5 rounded-xl bg-indigo-650 hover:bg-indigo-600 transition text-xs font-bold text-white shadow-lg shadow-indigo-650/10">Save Properties</button>
        </div>
    </div>
</div>

<script>
    function toggleWikiTabs(btn, paneId) {
        const card = btn.closest('.border-border');
        if (!card) return;
        card.querySelectorAll('button').forEach(b => {
            b.classList.remove('border-sky-500', 'text-sky-400');
            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        });
        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        btn.classList.add('border-sky-500', 'text-sky-400');
        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
        const target = card.querySelector('#' + paneId);
        if (target) target.classList.remove('hidden');
    }
</script>
{% endblock %}