glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Controls): add Drawer wrapper for mobiles

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-16 14:16:52 +03:00
parent 42854b4950
commit 23831efbe6
1 changed files with 52 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
View File

@@ -8,10 +8,13 @@
<script lang="ts"> <script lang="ts">
import { appliedFontsManager } from '$entities/Font'; import { appliedFontsManager } from '$entities/Font';
import { getFontUrl } from '$entities/Font/lib'; import { getFontUrl } from '$entities/Font/lib';
import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { SidebarMenu } from '$shared/ui'; import { SidebarMenu } from '$shared/ui';
import Drawer from '$shared/ui/Drawer/Drawer.svelte';
import { comparisonStore } from '$widgets/ComparisonSlider/model'; 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 ToggleMenuButton from './ToggleMenuButton.svelte';
import TypographyControls from './TypographyControls.svelte'; import TypographyControls from './TypographyControls.svelte';
@@ -33,6 +36,7 @@ const fontA = $derived(comparisonStore.fontA);
const fontB = $derived(comparisonStore.fontB); const fontB = $derived(comparisonStore.fontB);
const typography = $derived(comparisonStore.typography); const typography = $derived(comparisonStore.typography);
let menuWrapper = $state<HTMLElement | null>(null); let menuWrapper = $state<HTMLElement | null>(null);
const responsive = getContext<ResponsiveManager>('responsive');
$effect(() => { $effect(() => {
if (!fontA || !fontB) { if (!fontA || !fontB) {
@@ -64,28 +68,51 @@ $effect(() => {
}); });
</script> </script>
<SidebarMenu {#if responsive.isMobile}
class={cn( <Drawer>
'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', {#snippet trigger({ onClick })}
'relative h-full transition-all duration-700 ease-out', <div class={cn('absolute bottom-2 inset-x-0 z-50')}>
className, <ToggleMenuButton bind:isActive={visible} {onClick} />
)} </div>
bind:visible {/snippet}
bind:wrapper={menuWrapper} {#snippet content({ className })}
onClickOutside={handleToggle} <div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
> <div class="h-full overflow-hidden">
{#snippet action()} <FontList />
<!-- Always-visible mode switch --> </div>
<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>
<div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></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 class="mr-4 sm:mr-6"> </div>
<TypographyControls /> <div class="mr-4 sm:mr-6 flex-shrink-0">
</div> <TypographyControls />
</SidebarMenu> </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}