add collapsible tab pane

2025-09-30 15:08:55 +02:00
parent 11311316fd
commit 2cdc5bfcd9
7 changed files with 208 additions and 47 deletions
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { selectedTab, knownTabs, tabBarState } from "$lib/shared.svelte";
+
+    async function selectTab(index: number) {
+        const rawResponse = await fetch('/tab', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ index })
+        });
+        // const content = await rawResponse.json();
+        // TODO: use the response
+    }
+
+    function closeTabBar() {
+        tabBarState.visible = false;
+    }
+</script>
+
+<aside id="tabs" class:visible={tabBarState.visible}>
+    <div class="inner">
+        <header>
+            <span>Tabs</span>
+            <button type="button" onclick={() => closeTabBar()}>
+                <!-- "x" icon from https://github.com/feathericons/feather, under MIT license -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+        </header>
+
+        <ol id="tabs-list">
+            {#each knownTabs as tab}
+                <li class:active={selectedTab.index == tab.index}>
+                    <button type="button" onclick={() => selectTab(tab.index)}>
+                        { tab.name }
+                    </button>
+                </li>
+            {/each}
+        </ol>
+    </div>
+</aside>
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { tabBarState } from "$lib/shared.svelte";
+
+    function onclick() {
+        tabBarState.visible = true;
+    }
+</script>
+
+<button type="button" aria-label="Open tab pane" class:visible={!tabBarState.visible} {onclick}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+</button>
+
+<style>
+    button {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        padding: 25px 0;
+        border: none;
+        background-color: transparent;
+        transform: translateY(-50%);
+        z-index: 100;
+        opacity: 0;
+        transition: opacity 250ms ease;
+    }
+
+    button.visible {
+        opacity: 1;
+    }
+</style>