src/routes/Page.svelte

@@ -4,6 +4,8 @@
 -->
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
+import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     Logo,
     Section,
@@ -15,13 +17,17 @@ import CodeIcon from '@lucide/svelte/icons/code';
 import EyeIcon from '@lucide/svelte/icons/eye';
 import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanSearchIcon from '@lucide/svelte/icons/search';
-import type { Snippet } from 'svelte';
+import {
+    type Snippet,
+    getContext,
+} from 'svelte';
 import { cubicIn } from 'svelte/easing';
 import { fade } from 'svelte/transition';
 
 let searchContainer: HTMLElement;
 
-let isExpanded = $state(false);
+let isExpanded = $state(true);
+const responsive = getContext<ResponsiveManager>('responsive');
 
 function handleTitleStatusChanged(
     index: number,
@@ -39,39 +45,37 @@ function handleTitleStatusChanged(
         scrollBreadcrumbsStore.remove(index);
     };
 }
-
-// $effect(() => {
-//     appliedFontsManager.touch(
-//         selectedFontsStore.all.map(font => ({
-//             slug: font.id,
-//             weight: controlManager.weight,
-//         })),
-//     );
-// });
 </script>
 
 <!-- Font List -->
 <div
-    class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4"
+    class="p-2 sm:p-3 md:p-4 h-full grid gap-3 sm:gap-4 grid-cols-[max-content_1fr]"
     in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
 >
-    <Section class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
+    <Section
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        onTitleStatusChange={handleTitleStatusChanged}
+    >
         {#snippet icon({ className })}
             <CodeIcon class={className} />
         {/snippet}
         {#snippet description({ className })}
-            <span class={className}>
-                Project_Codename
-            </span>
+            <span class={className}> Project_Codename </span>
+        {/snippet}
+        {#snippet content({ className })}
+            <div class={cn(className, 'col-start-0 col-span-2')}>
+                <Logo />
+            </div>
         {/snippet}
-        <Logo />
     </Section>
 
     <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
         index={1}
         id="optical_comparator"
         onTitleStatusChange={handleTitleStatusChanged}
+        stickyTitle={responsive.isDesktopLarge}
+        stickyOffset="4rem"
     >
         {#snippet icon({ className })}
             <EyeIcon class={className} />
@@ -81,14 +85,20 @@ function handleTitleStatusChanged(
                 Optical<br />Comparator
             </h1>
         {/snippet}
-        <ComparisonSlider />
+        {#snippet content({ className })}
+            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <ComparisonSlider />
+            </div>
+        {/snippet}
     </Section>
 
     <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
         index={2}
         id="query_module"
         onTitleStatusChange={handleTitleStatusChanged}
+        stickyTitle={responsive.isDesktopLarge}
+        stickyOffset="4rem"
     >
         {#snippet icon({ className })}
             <ScanSearchIcon class={className} />
@@ -98,14 +108,20 @@ function handleTitleStatusChanged(
                 Query<br />Module
             </h2>
         {/snippet}
-        <FontSearch bind:showFilters={isExpanded} />
+        {#snippet content({ className })}
+            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <FontSearch bind:showFilters={isExpanded} />
+            </div>
+        {/snippet}
     </Section>
 
     <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
         index={3}
         id="sample_set"
         onTitleStatusChange={handleTitleStatusChanged}
+        stickyTitle={responsive.isDesktopLarge}
+        stickyOffset="4rem"
     >
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
@@ -115,18 +131,22 @@ function handleTitleStatusChanged(
                 Sample<br />Set
             </h2>
         {/snippet}
-        <SampleList />
+        {#snippet content({ className })}
+            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <SampleList />
+            </div>
+        {/snippet}
     </Section>
 </div>
 
 <style>
 .content {
-    /* Tells the browser to skip rendering off-screen content */
-    content-visibility: auto;
-    /* Helps the browser reserve space without calculating everything */
-    contain-intrinsic-size: 1px 1000px;
+  /* Tells the browser to skip rendering off-screen content */
+  content-visibility: auto;
+  /* Helps the browser reserve space without calculating everything */
+  contain-intrinsic-size: 1px 1000px;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 </style>