Monorepo for Tangled
web/lib/components: add vertical variant to Tabs
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jul 17, 2026, 4:29 PM +0100)
4beaf9a4
87e53b3f
+36
-14
+36
-14
web/src/lib/components/ui/Tabs.svelte
+36
-14
web/src/lib/components/ui/Tabs.svelte
···
18
18
tabs: TabDef[];
19
19
active: string;
20
20
label?: string;
21
+
vertical?: boolean;
21
22
}
22
23
23
-
let { tabs, active, label }: Props = $props();
24
+
let { tabs, active, label, vertical = false }: Props = $props();
25
+
26
+
const navClass = $derived(
27
+
vertical
28
+
? "h-fit divide-y divide-border-default overflow-hidden rounded border border-border-default"
29
+
: "flex w-full overflow-x-auto overflow-y-hidden pl-4"
30
+
);
31
+
32
+
const itemClass = (isActive: boolean) =>
33
+
vertical
34
+
? `flex items-center gap-3 px-3 py-2 text-sm no-underline hover:no-underline ${
35
+
isActive
36
+
? "bg-background-default text-foreground-default dark:bg-background-inset"
37
+
: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
38
+
}`
39
+
: `relative mr-1 flex items-center rounded-t px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
40
+
isActive
41
+
? "-mb-px bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
42
+
: "hover:bg-background-inset"
43
+
}`;
24
44
</script>
25
45
26
-
<nav class="flex w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
46
+
<nav class={navClass} aria-label={label}>
27
47
{#each tabs as tab (tab.id)}
28
48
{@const isActive = active === tab.id}
29
49
{@const Glyph = tab.icon}
30
50
<a
31
51
href={tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href}
32
52
aria-current={isActive ? "page" : undefined}
33
-
class={`relative mr-1 flex items-center rounded-t px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
34
-
isActive
35
-
? "-mb-px bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
36
-
: "hover:bg-background-inset"
37
-
}`}
53
+
class={itemClass(isActive)}
38
54
>
39
55
{#if Glyph}
40
-
<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
56
+
<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 h-4 w-4"} aria-hidden="true" />
41
57
{/if}
42
-
<span class="flex flex-col">
58
+
{#if vertical}
43
59
{tab.label}
44
-
<span aria-hidden="true" class="invisible h-0 overflow-hidden font-medium select-none"
45
-
>{tab.label}</span
46
-
>
47
-
</span>
60
+
{:else}
61
+
<span class="flex flex-col">
62
+
{tab.label}
63
+
<span aria-hidden="true" class="invisible h-0 overflow-hidden font-medium select-none"
64
+
>{tab.label}</span
65
+
>
66
+
</span>
67
+
{/if}
48
68
{#if tab.count}
49
-
<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
69
+
<span class="rounded bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
70
+
>{tab.count}</span
71
+
>
50
72
{/if}
51
73
</a>
52
74
{/each}