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

@@ -1,14 +1,14 @@
-import { For, createSignal } from 'solid-js';
+import { For, createSignal, createEffect } from 'solid-js';
-import { createEffect } from 'solid-js';
 
 import { useStore } from '../store/index';
+import type { Store } from '../store/index';
 import styles from './Controls.module.css';
 import LanguageSelector from './LanguageSelector';
 import homeIcon from '../assets/icons/home.svg'
 import gridIcon from '../assets/icons/grid.svg'
 
 export default () => {
-  const [store] = useStore();
+  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

@@ -2,12 +2,14 @@ import { useI18n } from "@solid-primitives/i18n";
 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();
+  const [store, { setVisibleChapter }] = useStore() as Store;
 
   return (
     <header 
@@ -16,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: var(--gap-md);
-  padding: 32px;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/Projects/Projects.tsx

@@ -1,10 +1,12 @@
 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();
+  const [store, { setVisibleChapter }] = useStore() as Store;
   const [observer] = createViewportObserver({threshold: 0.9});
 
   return (
@@ -14,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/store/index.tsx

@@ -1,14 +1,14 @@
 import { createSignal, createContext, useContext } from "solid-js";
 import type { Accessor, Setter } from 'solid-js';
 
-type Store = [
+export type Store = [
   { visibleChapter: Accessor<string> }, 
   { setVisibleChapter: Setter<string> }
 ]
 
 const StoreContext = createContext<Store>();
 
-export function StoreProvider(props) {
+export function StoreProvider(props: any) {
   const [visibleChapter, setVisibleChapter] = createSignal('home');
   const store: Store = [
     {

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();
+  });
+}