From e1ed3d53dbc04fa48342b8431f14b53d524cd459 Mon Sep 17 00:00:00 2001
From: Xeovalyte <me+gitea@xeovalyte.dev>
Date: Sun, 12 Feb 2023 10:59:55 +0100
Subject: [PATCH] added a leftbar

---
 components/layout/Leftbar.vue       | 17 ++++++++++++++++
 components/{ => slides}/About.vue   |  0
 components/{ => slides}/Heading.vue |  3 ++-
 components/{ => slides}/Skills.vue  |  0
 composables/scrollToElement.js      |  4 ++++
 pages/index.vue                     | 30 ++++++++++++++++++++++++-----
 6 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 components/layout/Leftbar.vue
 rename components/{ => slides}/About.vue (100%)
 rename components/{ => slides}/Heading.vue (92%)
 rename components/{ => slides}/Skills.vue (100%)
 create mode 100644 composables/scrollToElement.js

diff --git a/components/layout/Leftbar.vue b/components/layout/Leftbar.vue
new file mode 100644
index 0000000..43ec1f4
--- /dev/null
+++ b/components/layout/Leftbar.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="fixed hidden lg:block left-3 top-1/2 text-primary-500 space-y-1 z-50">
+    <div @click="scrollToElement('heading')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#heading' ? 'w-16' : 'w-8'" />
+    </div>
+    <div @click="scrollToElement('about')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#about' ? 'w-16' : 'w-8'" />
+    </div>
+    <div @click="scrollToElement('skills')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#skills' ? 'w-16' : 'w-8'" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+</script>
diff --git a/components/About.vue b/components/slides/About.vue
similarity index 100%
rename from components/About.vue
rename to components/slides/About.vue
diff --git a/components/Heading.vue b/components/slides/Heading.vue
similarity index 92%
rename from components/Heading.vue
rename to components/slides/Heading.vue
index 1db164e..f7ac861 100644
--- a/components/Heading.vue
+++ b/components/slides/Heading.vue
@@ -7,7 +7,7 @@
     >
       <img
         v-animate="{ preset: 'slide-left', delay: 300 }"
-        src="../assets/icons/logo.svg"
+        src="../../assets/icons/logo.svg"
         alt="Logo Xeovalyte"
         width="150"
       />
@@ -31,6 +31,7 @@
       </div>
 
       <Icon
+        @click="scrollToElement('about')"
         size="2em"
         name="ph:arrow-fat-line-down"
         class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
diff --git a/components/Skills.vue b/components/slides/Skills.vue
similarity index 100%
rename from components/Skills.vue
rename to components/slides/Skills.vue
diff --git a/composables/scrollToElement.js b/composables/scrollToElement.js
new file mode 100644
index 0000000..3588319
--- /dev/null
+++ b/composables/scrollToElement.js
@@ -0,0 +1,4 @@
+export default function (hash) {
+  const element = document.getElementById(hash)
+  element.scrollIntoView({ behavior: 'smooth' })
+}
diff --git a/pages/index.vue b/pages/index.vue
index 05cb0ec..2e9a075 100644
--- a/pages/index.vue
+++ b/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>