added a leftbar

pages/index.vue

@@ -1,9 +1,29 @@
 <template>
-  <div class="h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden bg-dark-200">
-    <Heading />
-    <About />
-    <Skills />
+  <LayoutLeftbar />
+  <div id="observe" class="h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden bg-dark-200">
+    <SlidesHeading id="heading" />
+    <SlidesAbout id="about" />
+    <SlidesSkills id="skills" />
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const router = useRouter()
+
+const callback = (entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      router.replace({ hash: '#' + entry.target.id})
+    }
+  })
+}
+
+onMounted(() => {
+  let targets = document.querySelectorAll('section')
+  const observer = new IntersectionObserver(callback, { root: document.querySelector('#observe'), threshold: 0.9 })
+
+  targets.forEach(target => {
+    observer.observe(target)
+  })
+})
+</script>