Merge pull request #88 from wilfredinni/next

chore: init toc only on xl and larger screens

Author: wilfredinni

src/components/layout/TheToc.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
+import { breakpointsTailwind } from '@vueuse/core'
 import type { Ref } from 'vue'
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const xlAndLarger = breakpoints.greater('xl')
+
 interface Toc {
   header: string
   id: string
@@ -34,16 +38,21 @@ const getObserver = () => {
   })
 }
 
+const initToc = () => {
+  if (xlAndLarger.value) {
+    createToc()
+    getObserver()
+  }
+}
+
 const route = useRoute()
 onMounted(() => {
-  createToc()
-  getObserver()
+  initToc()
 })
 
 watch(route, () => {
   nextTick(() => {
-    createToc()
-    getObserver()
+    initToc()
   })
 })
 </script>