From 17de544bdb7dae205ba105085e37f74cdda26638 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:09:21 +0300
Subject: [PATCH] feat(ComparisonSlider): add a toggle button that shows
 selected fonts and opens the sidebar menu with settings

---
 .../components/ToggleMenuButton.svelte        | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
new file mode 100644
index 0000000..c887456
--- /dev/null
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
@@ -0,0 +1,74 @@
+<!--
+    Component: ToggleMenuButton
+    Toggles menu sidebar, displays selected fonts names
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
+import { cubicOut } from 'svelte/easing';
+import { draw } from 'svelte/transition';
+
+interface Props {
+    isActive?: boolean;
+    onClick?: () => void;
+}
+
+let { isActive = $bindable(false), onClick }: Props = $props();
+
+// Handle click and toggle
+const toggle = () => {
+    onClick?.();
+    isActive = !isActive;
+};
+
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
+</script>
+
+{#snippet icon(className?: string)}
+    <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"
+        class={cn('lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right', className)}
+    >
+        <circle cx="12" cy="12" r="10" />
+        {#if isActive}
+            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m15 9-6 6" /><path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="m9 9 6 6"
+            />
+        {:else}
+            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m12 16 4-4-4-4" /><path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="M8 12h8"
+            />
+        {/if}
+    </svg>
+{/snippet}
+
+<button
+    onclick={toggle}
+    aria-pressed={isActive}
+    class={cn(
+        'group relative flex items-center justify-center gap-2 sm:gap-3 px-4 sm:px-6 py-2',
+        'cursor-pointer select-none overflow-hidden',
+        'transition-transform duration-150 active:scale-98',
+    )}
+>
+    {@render icon('size-4 stroke-[1.5] stroke-gray-500')}
+    <div class="w-px h-2.5 bg-gray-400/50"></div>
+    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-indigo-500 text-right">
+        {fontB?.name}
+    </div>
+    <div class="w-px h-2.5 bg-gray-400/50"></div>
+    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-neural-950 text-left">
+        {fontA?.name}
+    </div>
+</button>