feat(Controls): add Drawer wrapper for mobiles

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,7 +68,29 @@ $effect(() => {
 });
 </script>
 
-<SidebarMenu
+{#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 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',
@@ -73,7 +99,7 @@ $effect(() => {
         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')}>
@@ -81,11 +107,12 @@ $effect(() => {
             </div>
         {/snippet}
         <div class="h-2/3 overflow-hidden">
-        <ComparisonList />
+            <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>
+    </SidebarMenu>
+{/if}