[AppLayout] Fix scrolling to #fragment on page load by making body sc…

…rollable instead of <main>. Remove `overlapHeader` prop (always overlap). (#404)
techniq · Jun 21, 2024 · 3f02723 · 3f02723
1 parent 91b58c5
commit 3f02723
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 50 deletions.
diff --git a/.changeset/nine-owls-tell.md b/.changeset/nine-owls-tell.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[AppLayout] Fix scrolling to #fragment on page load by making body scrollable instead of <main>. Remove `overlapHeader` prop (always overlap).
diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte
@@ -10,40 +10,37 @@
   export let navWidth = 240;
   export let headerHeight = 64;
 
-  /** Control whether nav should be full height (default) or header should be full width */
+  /** Control whether header should be full width (deafult) or nav should be full height */
   export let headerPosition: 'full' | 'inset' = 'full';
 
-  /** Overlap `main` under header using negative top margin with positive top padding to support background blur */
-  export let overlapHeader = false;
-
-  $: areas =
-    headerPosition === 'full' ? "'header header' 'aside main'" : "'aside header' 'aside main'";
-
   export let classes: {
     root?: string;
     aside?: string;
     nav?: string;
   } = {};
-  const settingsClasses = getComponentClasses('AppLayout');
 
+  const settingsClasses = getComponentClasses('AppLayout');
   const { showDrawer } = getSettings();
-
   $: temporaryDrawer = browser ? !$mdScreen : false;
 </script>
 
 <div
   style:--headerHeight="{headerHeight}px"
   style:--drawerWidth="{$showDrawer ? navWidth : 0}px"
   style:--navWidth="{navWidth}px"
-  style:--areas={areas}
   class={cls(
     'AppLayout',
-    'grid grid-cols-[auto,1fr] grid-rows-[var(--headerHeight),1fr] h-screen',
+    '[&>header]:fixed [&>header]:top-0 [&>header]:h-[var(--headerHeight)] [&>header]:transition-all',
+    headerPosition === 'full' || temporaryDrawer
+      ? '[&>header]:w-full'
+      : '[&>header]:w-[calc(100%-var(--drawerWidth))] [&>header]:left-[var(--drawerWidth)] [&>header]:duration-500',
+    '[&>main]:md:pl-[var(--drawerWidth)] [&>main]:pt-[var(--headerHeight)] [&>main]:transition-[padding] [&>main]:duration-500',
+    /* Fix scrolling offset for headings (h1, ...) or other elements with an id set (`<a href="#id">`) */
+    '[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
     settingsClasses.root,
     classes.root,
     $$props.class
   )}
-  class:overlapHeader
 >
   <slot />
 
@@ -54,41 +51,24 @@
 
   <aside
     class={cls(
-      'w-[var(--drawerWidth)] transition-all duration-500 overflow-hidden',
-      temporaryDrawer && 'fixed h-full z-50 elevation-10',
+      'fixed top-0 h-full w-[var(--drawerWidth)] transition-all duration-500 overflow-hidden',
+      temporaryDrawer
+        ? 'fixed h-full z-50 elevation-10'
+        : headerPosition === 'full'
+          ? 'mt-[var(--headerHeight)]'
+          : '',
       settingsClasses.aside,
       classes.aside
     )}
   >
     <nav
-      class={cls('nav h-full overflow-auto w-[var(--navWidth)]', settingsClasses.nav, classes.nav)}
+      class={cls(
+        'nav h-full overflow-auto overscroll-contain w-[var(--navWidth)]',
+        settingsClasses.nav,
+        classes.nav
+      )}
     >
       <slot name="nav" />
     </nav>
   </aside>
 </div>
-
-<style>
-  .AppLayout {
-    grid-template-areas: var(--areas);
-  }
-
-  .AppLayout aside {
-    grid-area: aside;
-  }
-
-  .AppLayout :global(> header) {
-    grid-area: header;
-  }
-
-  .AppLayout :global(> main) {
-    grid-area: main;
-    overflow: auto;
-  }
-
-  /* Overlap under header to support background blur */
-  .AppLayout.overlapHeader :global(> main) {
-    margin-top: calc(var(--headerHeight) * -1);
-    padding-top: var(--headerHeight);
-  }
-</style>
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -297,14 +297,14 @@
     </div>
   </AppBar>
 
-  <main class="scroll-smooth isolate" bind:this={mainEl}>
+  <main class="isolate" bind:this={mainEl}>
     <slot />
   </main>
 </AppLayout>
 
 <style lang="postcss">
-  :global(body) {
-    @apply bg-surface-200 accent-primary;
+  :global(html) {
+    @apply bg-surface-200 accent-primary scroll-smooth;
     /* background-image:
       radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
       radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
@@ -318,19 +318,20 @@
     @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
   }
 
+  :global(main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *)) {
+    scroll-margin-top: calc(var(--headerHeight) + 128px); /* app header + docs header */
+  }
+
   :global(main h1:not(.prose *, .related *, .ApiDocs *)) {
     @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
-    scroll-margin-top: 128px; /* sticky header */
   }
 
   :global(main h2:not(.prose *, .related *, .ApiDocs *)) {
     @apply text-lg font-semibold mt-4 mb-1;
-    scroll-margin-top: 128px; /* sticky header */
   }
 
   :global(main h3:not(.prose *, .related *, .ApiDocs *)) {
     @apply text-xs text-surface-content/50 mb-1;
-    scroll-margin-top: 128px; /* sticky header */
   }
   :global(main :not(.prose) h2 + h3) {
     @apply -mt-1;

diff --git a/packages/svelte-ux/src/routes/changelog/+page.svelte b/packages/svelte-ux/src/routes/changelog/+page.svelte
@@ -17,7 +17,7 @@
   </div>
 
   <div class="hidden lg:block w-[224px]">
-    <div class="sticky top-0 pr-2 max-h-[calc(100vh-64px)] overflow-auto">
+    <div class="sticky top-[var(--headerHeight)] pr-2 max-h-[calc(100vh-64px)] overflow-auto">
       <div class="text-xs uppercase leading-8 tracking-widest text-surface-content/50">
         On this page
       </div>

diff --git a/packages/svelte-ux/src/routes/customization/+layout.svelte b/packages/svelte-ux/src/routes/customization/+layout.svelte
@@ -10,7 +10,7 @@
   </div>
 
   <div class="hidden lg:block w-[224px]">
-    <div class="sticky top-0 pr-2 max-h-[calc(100vh-64px)] overflow-auto">
+    <div class="sticky top-[var(--headerHeight)] pr-2 max-h-[calc(100vh-64px)] overflow-auto">
       <div class="text-xs uppercase leading-8 tracking-widest text-surface-content/50">
         On this page
       </div>

diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -77,7 +77,7 @@
 </script>
 
 <div
-  class="[@media(min-height:900px)]:sticky top-0 z-[60] bg-surface-200/90 backdrop-blur px-5 py-4 [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)calc(100%-4px),rgba(0,0,0,0))]"
+  class="[@media(min-height:900px)]:sticky top-[var(--headerHeight)] z-[60] bg-surface-200/90 backdrop-blur px-5 py-4 [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)calc(100%-4px),rgba(0,0,0,0))]"
 >
   {#if title}
     <div>
@@ -236,7 +236,9 @@
 
     {#if showTableOfContents && $xlScreen}
       <div transition:slide={{ axis: 'x' }}>
-        <div class="w-[224px] sticky top-10 pr-2 max-h-[calc(100dvh-64px)] overflow-auto z-[60]">
+        <div
+          class="w-[224px] sticky top-[calc(var(--headerHeight)+10px)] pr-2 max-h-[calc(100dvh-64px)] overflow-auto z-[60]"
+        >
           <div class="text-xs uppercase leading-8 tracking-widest text-surface-content/50">
             On this page
           </div>