Two way scroll binding

src/components/Controls.module.css

@@ -1,10 +1,10 @@
 .Controls {
   position: fixed;
   background: var(--clr-bg-secondary);
-  left: 16px;
+  left: var(--gap-sm);
   top: 50%;
   transform: translateY(-50%);
-  padding: 18px;
+  padding: var(--gap-sm);
   border-radius: 12px;
   width: 64px;
 }
@@ -13,7 +13,7 @@
   position: relative;
   height: calc(64px * 3);
   width: 100%;
-  margin-bottom: 32px;
+  margin-bottom: var(--gap-md);
 }
 
 .controlsWrapper, .gooWrapper {
@@ -41,7 +41,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 18px;
+  padding: var(--gap-sm);
   box-sizing: border-box;
 }
 

src/components/Controls.tsx

@@ -8,7 +8,7 @@ import homeIcon from '../assets/icons/home.svg'
 import gridIcon from '../assets/icons/grid.svg'
 
 export default () => {
-  const [store] = useStore() as Store;
+  const [store, {setVisibleChapter}] = useStore() as Store;
   const [selected, setSelected] = createSignal('home');
   const [blobby, setBlobby] = createSignal(['home']);
   const chapters = [
@@ -20,6 +20,7 @@ export default () => {
   const selectChapter = (chapterName: string) => {
     if (chapterName !== selected()) {
       setSelected(chapterName)
+      setVisibleChapter(chapterName)
       setBlobby(b => [chapterName, ...b])
       setTimeout(() => {
         setBlobby(b => [chapterName])

src/components/Hero.tsx

@@ -3,12 +3,13 @@ import { createViewportObserver } from '@solid-primitives/intersection-observer'
 
 import { useStore } from '../store/index';
 import type { Store } from '../store/index';
+import { scrollHereWhenSelected } from "../utlis/scroll";
 import styles from './Hero.module.css';
 
 export default () => {
   const [t] = useI18n();
   const [observer] = createViewportObserver({threshold: 0.9});
-  const [, { setVisibleChapter }] = useStore() as Store;
+  const [store, { setVisibleChapter }] = useStore() as Store;
 
   return (
     <header 
@@ -17,6 +18,7 @@ export default () => {
           setVisibleChapter('home');
         }}
       }
+      ref={(element) => scrollHereWhenSelected(element, store, 'home')}
       class={styles.Hero}
     >
       <div>

src/components/Projects/Projects.module.css

@@ -1,6 +1,5 @@
 .Projects {
-  height: 101vh;
-  padding: 32px;
+  padding: var(--gap-md);
   display: flex;
   justify-content: center;
   align-items: center;

src/components/Projects/Projects.tsx

@@ -2,10 +2,11 @@ import { createViewportObserver } from '@solid-primitives/intersection-observer'
 
 import { useStore } from '../../store/index';
 import type { Store } from '../../store/index';
+import { scrollHereWhenSelected } from "../../utlis/scroll";
 import styles from './Projects.module.css';
 
 export default () => {
-  const [, { setVisibleChapter }] = useStore() as Store;
+  const [store, { setVisibleChapter }] = useStore() as Store;
   const [observer] = createViewportObserver({threshold: 0.9});
 
   return (
@@ -15,6 +16,7 @@ export default () => {
           setVisibleChapter('projects');
         }}
       }
+      ref={(element) => scrollHereWhenSelected(element, store, 'projects')}
       class={styles.Projects}
     >
       

src/index.css

@@ -1,6 +1,9 @@
 :root {
   --clr-bg: rgb(7, 6, 9);
   --clr-bg-secondary: hsl(260, 20%, 16%);
+  --gap-sm: 18px;
+  --gap-md: 36px;
+  --gap-lg: 72px;
 }
 
 body {

src/utlis/scroll.ts

@@ -0,0 +1,10 @@
+import { createEffect } from "solid-js";
+
+export const scrollHereWhenSelected = (element: HTMLElement, store, chapter) => {
+  return createEffect((prev) => {
+    if (prev !== store.visibleChapter() && store.visibleChapter() === chapter) {
+      element.scrollIntoView({behavior: "smooth"})
+    }
+    return store.visibleChapter();
+  });
+}