src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte

@@ -1,44 +1,45 @@
+<!--
+    Component: Controls
+    Uses SidebarMenu to show ComparisonSlider's controls:
+    - List of fonts to pick
+    - Input to change text
+    - Sliders for font-weight, font-width, line-height
+-->
 <script lang="ts">
 import { appliedFontsManager } from '$entities/Font';
 import { getFontUrl } from '$entities/Font/lib';
-import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    Drawer,
-    IconButton,
-} from '$shared/ui';
-import SlidersIcon from '@lucide/svelte/icons/sliders-vertical';
-import { getContext } from 'svelte';
-import { comparisonStore } from '../../../model';
-import SelectComparedFonts from './SelectComparedFonts.svelte';
+import { SidebarMenu } from '$shared/ui';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
+import ComparisonList from './FontList.svelte';
+import ToggleMenuButton from './ToggleMenuButton.svelte';
 import TypographyControls from './TypographyControls.svelte';
 
 interface Props {
-    sliderPos: number;
-    isDragging: boolean;
-    typographyControls?: HTMLDivElement | null;
-    container: HTMLElement;
+    /**
+     * Additional class
+     */
+    class?: string;
+    /**
+     * Handler to trigger when menu opens/closes
+     */
+    handleToggle?: () => void;
 }
 
-let {
-    sliderPos,
-    isDragging,
-    typographyControls = $bindable<HTMLDivElement | null>(null),
-    container,
-}: Props = $props();
+let { class: className, handleToggle }: Props = $props();
 
+let visible = $state(false);
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-
-const weight = $derived(comparisonStore.typography.weight);
-
-const responsive = getContext<ResponsiveManager>('responsive');
+const typography = $derived(comparisonStore.typography);
+let menuWrapper = $state<HTMLElement | null>(null);
 
 $effect(() => {
     if (!fontA || !fontB) {
         return;
     }
 
+    const weight = typography.weight;
     const fontAUrl = getFontUrl(fontA, weight);
     const fontBUrl = getFontUrl(fontB, weight);
 
@@ -63,41 +64,28 @@ $effect(() => {
 });
 </script>
 
-{#if responsive.isMobile}
-    <Drawer>
-        {#snippet trigger({ isOpen, onClick })}
-            <IconButton class="absolute right-3 top-3" onclick={onClick}>
-                {#snippet icon({ className })}
-                    <SlidersIcon class={className} />
-                {/snippet}
-            </IconButton>
-        {/snippet}
-
-        {#snippet content({ isOpen, className })}
-            <div class={cn(className, 'flex flex-col gap-6')}>
-                <SelectComparedFonts {sliderPos} />
-                <TypographyControls
-                    {sliderPos}
-                    {isDragging}
-                    isActive={isOpen}
-                    bind:wrapper={typographyControls}
-                    containerWidth={container?.clientWidth}
-                    staticPosition
-                />
+<SidebarMenu
+    class={cn(
+        'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
+        'relative h-full transition-all duration-700 ease-out',
+        className,
+    )}
+    bind:visible
+    bind:wrapper={menuWrapper}
+    onClickOutside={handleToggle}
+>
+    {#snippet action()}
+        <!-- Always-visible mode switch -->
+        <div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
+            <ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
         </div>
     {/snippet}
-    </Drawer>
-{:else}
-    <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
-        <TypographyControls
-            {sliderPos}
-            {isDragging}
-            bind:wrapper={typographyControls}
-            containerWidth={container?.clientWidth}
-        />
+    <div class="h-2/3 overflow-hidden">
+        <ComparisonList />
     </div>
 
-    <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
-        <SelectComparedFonts {sliderPos} />
+    <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
+    <div class="mr-4 sm:mr-6">
+        <TypographyControls />
     </div>
-{/if}
+</SidebarMenu>