From 23831efbe6cf38eb687aa51cf25e8afeff95d78c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:16:52 +0300
Subject: [PATCH] feat(Controls): add Drawer wrapper for mobiles

---
 .../components/Controls.svelte                | 77 +++++++++++++------
 1 file changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 8e59753..7ca3f86 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -8,10 +8,13 @@
 <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 { SidebarMenu } from '$shared/ui';
+import Drawer from '$shared/ui/Drawer/Drawer.svelte';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
-import ComparisonList from './FontList.svelte';
+import { getContext } from 'svelte';
+import FontList from './FontList.svelte';
 import ToggleMenuButton from './ToggleMenuButton.svelte';
 import TypographyControls from './TypographyControls.svelte';
 
@@ -33,6 +36,7 @@ const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const typography = $derived(comparisonStore.typography);
 let menuWrapper = $state<HTMLElement | null>(null);
+const responsive = getContext<ResponsiveManager>('responsive');
 
 $effect(() => {
     if (!fontA || !fontB) {
@@ -64,28 +68,51 @@ $effect(() => {
 });
 </script>
 
-<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}
-    <div class="h-2/3 overflow-hidden">
-        <ComparisonList />
-    </div>
+{#if responsive.isMobile}
+    <Drawer>
+        {#snippet trigger({ onClick })}
+            <div class={cn('absolute bottom-2 inset-x-0 z-50')}>
+                <ToggleMenuButton bind:isActive={visible} {onClick} />
+            </div>
+        {/snippet}
+        {#snippet content({ className })}
+            <div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
+                <div class="h-full overflow-hidden">
+                    <FontList />
+                </div>
 
-    <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>
-</SidebarMenu>
+                <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10 flex-shrink-0">
+                </div>
+                <div class="mr-4 sm:mr-6 flex-shrink-0">
+                    <TypographyControls />
+                </div>
+            </div>
+        {/snippet}
+    </Drawer>
+{:else}
+    <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}
+        <div class="h-2/3 overflow-hidden">
+            <FontList />
+        </div>
+
+        <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>
+    </SidebarMenu>
+{/if}