fix: click on heading and toc (#671)

Co-authored-by: Yaël Guilloux <[email protected]>

app/router.options.ts

@@ -0,0 +1,15 @@
+import type { RouterConfig } from '@nuxt/schema'
+// https://router.vuejs.org/api/interfaces/routeroptions.html
+export default <RouterConfig> {
+  scrollBehavior (to, from, savedPosition) {
+    if (to.hash) {
+      const { marginTop } = getComputedStyle((document.querySelector(to.hash) as any))
+      const marginTopValue = parseInt(marginTop)
+      const offset = (document.querySelector(to.hash) as any).offsetTop - marginTopValue
+      return {
+        top: offset,
+        behavior: 'smooth'
+      }
+    }
+  }
+}

assets/css/main.css

@@ -50,13 +50,6 @@
   box-shadow: none !important;
 }
 
-html,
-body {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
 body {
   overflow-y: scroll;
   -webkit-font-smoothing: antialiased;

components/docs/DocsPageContent.vue

@@ -85,12 +85,10 @@ onBeforeUnmount(() => {
         <DocsPrevNext />
       </template>
     </article>
+
     <!-- TOC -->
     <div
       v-if="hasToc"
-      :class="{
-        'closed': !isOpen,
-      }"
       class="toc"
     >
       <div class="toc-wrapper">
@@ -217,13 +215,6 @@ css({
       alignSelf: 'flex-start',
       py: '{space.8}',
     },
-    '&.closed': {
-      display: 'flex',
-      alignItems: 'center',
-      '@mq.lg': {
-        display: 'block'
-      }
-    },
     '.toc-wrapper': {
       width: '100%',
       backdropFilter: '{backdrop.filter}',

components/docs/DocsTocLinks.vue

@@ -16,26 +16,18 @@ const router = useRouter()
 
 const { activeHeadings, updateHeadings } = useScrollspy()
 
-watch(
-  () => route.path,
-  () => {
-    if (process.client) {
-      setTimeout(() => {
-        updateHeadings([
-          ...document.querySelectorAll('.document-driven-page h1, .docus-content h1'),
-          ...document.querySelectorAll('.document-driven-page h2, .docus-content h2'),
-          ...document.querySelectorAll('.document-driven-page h3, .docus-content h3'),
-          ...document.querySelectorAll('.document-driven-page h4, .docus-content h4')
-        ])
-      }, 300)
-    }
-  },
-  {
-    immediate: true
-  }
-)
+if (process.client) {
+  setTimeout(() => {
+    updateHeadings([
+      ...document.querySelectorAll('.document-driven-page h1, .docus-content h1'),
+      ...document.querySelectorAll('.document-driven-page h2, .docus-content h2'),
+      ...document.querySelectorAll('.document-driven-page h3, .docus-content h3'),
+      ...document.querySelectorAll('.document-driven-page h4, .docus-content h4')
+    ])
+  }, 300)
+}
 
-const scrollToHeading = (id: string) => {
+function scrollToHeading (id: string) {
   router.push(`#${id}`)
   emit('move', id)
 }
@@ -78,11 +70,11 @@ css({
       '@mq.lg': {
         paddingRight: '{space.3}'
       },
-      '&:hover': {
+      '&:not(.active):hover': {
         color: '{colors.gray.900}',
       },
       '@dark': {
-        '&:hover': {
+        '&:not(.active):hover': {
           color: '{colors.gray.400}',
         },
       },