docs: prevent aside to scroll up on page change

docs/app.vue

@@ -3,7 +3,21 @@
     <Header />
 
     <UContainer>
-      <NuxtPage />
+      <div class="relative grid lg:grid-cols-10 lg:gap-8">
+        <DocsAside class="lg:col-span-2" />
+
+        <div class="relative lg:col-span-6 pt-8 pb-16">
+          <DocsPageHeader />
+
+          <NuxtPage />
+
+          <hr class="border-gray-200 dark:border-gray-800 my-12">
+
+          <DocsPrevNext />
+        </div>
+
+        <DocsToc class="lg:col-span-2 order-first lg:order-last" />
+      </div>
     </UContainer>
 
     <DocsSearch />

docs/app/router.options.ts

@@ -1,48 +1,38 @@
 import type { RouterConfig } from '@nuxt/schema'
+// https://router.vuejs.org/api/interfaces/routeroptions.html
+export default <RouterConfig> {
+  scrollBehavior (to, _form, savedPosition) {
+    if (history.state.stop) { return }
 
-function findHashPosition (hash): { el: any, behavior: ScrollBehavior, top: number } {
-  const el = document.querySelector(hash)
-  // vue-router does not incorporate scroll-margin-top on its own.
-  if (el) {
-    const top = parseFloat(getComputedStyle(el).scrollMarginTop)
-
-    return {
-      el: hash,
-      behavior: 'smooth',
-      top
-    }
-  }
-}
-
-// https://router.vuejs.org/api/#routeroptions
-export default <RouterConfig>{
-  scrollBehavior (to, from, savedPosition) {
-    const nuxtApp = useNuxtApp()
-
-    // If history back
-    if (savedPosition) {
-      // Handle Suspense resolution
-      return new Promise((resolve) => {
-        nuxtApp.hooks.hookOnce('page:finish', () => {
-          setTimeout(() => resolve(savedPosition), 50)
-        })
-      })
+    if (history.state.smooth) {
+      return {
+        el: history.state.smooth,
+        behavior: 'smooth'
+      }
     }
 
-    // Scroll to heading on click
     if (to.hash) {
-      return new Promise((resolve) => {
-        if (to.path === from.path) {
-          setTimeout(() => resolve(findHashPosition(to.hash)), 50)
-        } else {
-          nuxtApp.hooks.hookOnce('page:finish', () => {
-            setTimeout(() => resolve(findHashPosition(to.hash)), 50)
-          })
-        }
-      })
+      const el = document.querySelector(to.hash) as any
+
+      if (!el) { return }
+
+      const { marginTop } = getComputedStyle(el)
+
+      const marginTopValue = parseInt(marginTop)
+
+      const offset = (document.querySelector(to.hash) as any).offsetTop - marginTopValue
+
+      return {
+        top: offset,
+        behavior: 'smooth'
+      }
     }
 
     // Scroll to top of window
-    return { top: 0 }
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
   }
 }

docs/components/docs/DocsAside.vue

@@ -1,7 +1,5 @@
 <template>
-  <aside
-    class="hidden pb-8 overflow-y-auto lg:block lg:self-start lg:top-16 lg:max-h-[calc(100vh-64px)] lg:sticky lg:pr-8 lg:pl-[2px]"
-  >
+  <aside class="hidden pb-8 overflow-y-auto lg:block lg:self-start lg:top-16 lg:max-h-[calc(100vh-64px)] lg:sticky lg:pr-8 lg:pl-[2px]">
     <div class="relative">
       <div class="sticky top-0 pointer-events-none z-[1]">
         <div class="h-8 bg-white dark:bg-gray-900" />

docs/layouts/default.vue

@@ -1,19 +1,5 @@
 <template>
-  <div class="relative grid lg:grid-cols-10 lg:gap-8">
-    <DocsAside class="lg:col-span-2" />
-
-    <div class="relative lg:col-span-6 pt-8 pb-16">
-      <DocsPageHeader />
-
-      <div class="prose prose-primary dark:prose-invert max-w-none">
-        <slot />
-      </div>
-
-      <hr class="border-gray-200 dark:border-gray-800 my-12">
-
-      <DocsPrevNext />
-    </div>
-
-    <DocsToc class="lg:col-span-2 order-first lg:order-last" />
+  <div class="prose prose-primary dark:prose-invert max-w-none">
+    <slot />
   </div>
 </template>