fix: clicks and visibility across devices.

AdityaSrivastava185 · Nov 27, 2024 · a0f6351 · a0f6351
1 parent c735369
commit a0f6351
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/lib/components/TocNav.svelte b/src/lib/components/TocNav.svelte
@@ -2,6 +2,7 @@
     import TocTree from './TocTree.svelte';
     import { cubicOut } from 'svelte/easing';
     import { getTocCtx } from './TocRoot.svelte';
+    import { onMount } from 'svelte';
 
     export let showToc = true;
 
@@ -37,8 +38,17 @@
             }
         };
     }
+
+    // show toc by default on desktop
+    function handleResizeForTocTree() {
+        showToc = window.innerWidth >= 1024;
+    }
+
+    onMount(handleResizeForTocTree);
 </script>
 
+<svelte:window on:resize={handleResizeForTocTree} />
+
 <section class="web-mobile-header">
     <div class="web-is-only-mobile">
         <button
@@ -170,7 +180,7 @@
         border-block-start: unset;
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 1024px) {
         .web-mobile-header {
             top: 0;
             margin: 1rem 0;
@@ -203,4 +213,15 @@
             display: block;
         }
     }
+
+    @media (min-width: 1024px) {
+        .web-mobile-header {
+            border-block-end: unset;
+            border-block-start: unset;
+        }
+
+        .toc-tree-holder {
+            margin-top: unset;
+        }
+    }
 </style>
diff --git a/src/lib/components/TocTree.svelte b/src/lib/components/TocTree.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { type TableOfContentsItem, type TableOfContentsElements, melt } from '@melt-ui/svelte';
     import { getTocCtx } from './TocRoot.svelte';
+    import { browser } from '$app/environment';
 
     export let tree: TableOfContentsItem[] = [];
     export let activeHeadingIdxs: number[];
@@ -14,6 +15,11 @@
             helpers: { isActive }
         }
     } = getTocCtx();
+
+    function onItemClick() {
+        const isDesktop = browser ? window.innerWidth >= 1024 : false;
+        if (!isDesktop) showToc = !showToc;
+    }
 </script>
 
 <ul class="web-page-steps-list text-sub-body font-medium">
@@ -24,7 +30,7 @@
                     class:is-selected={$isActive(heading.id)}
                     href="#{heading.id}"
                     use:melt={$item(heading.id)}
-                    on:click|preventDefault={() => showToc = !showToc}
+                    on:click|preventDefault={onItemClick}
                 >
                     <!--  eslint-disable-next-line svelte/no-at-html-tags -->
                     {@html heading.node.innerHTML}