From ac7b270685d3b89c3d0b17dc4c7c37cd3cf3c1f4 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 15:20:54 +0000
Subject: [PATCH 1/8] Add useScrollSpy hook

---
 frontend/src/hooks/use-scroll-spy.ts | 72 ++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 frontend/src/hooks/use-scroll-spy.ts

diff --git a/frontend/src/hooks/use-scroll-spy.ts b/frontend/src/hooks/use-scroll-spy.ts
new file mode 100644
index 00000000..330ccc44
--- /dev/null
+++ b/frontend/src/hooks/use-scroll-spy.ts
@@ -0,0 +1,72 @@
+import { RefObject, useLayoutEffect, useState } from 'react';
+
+type ScrollSpyItem = {
+  id: string;
+  ref: RefObject<HTMLDivElement>;
+};
+
+type ScrollSpyOptions = {
+  overBounds: boolean;
+};
+
+const DEFAULT_OPTIONS = {
+  overBounds: true,
+  thresholdPercentage: 50,
+};
+
+const useScrollSpy = (items: ScrollSpyItem[], options?: ScrollSpyOptions) => {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useLayoutEffect(() => {
+    const scrollListener = () => {
+      const windowHeight = window.innerHeight;
+      const viewingPosition = (DEFAULT_OPTIONS.thresholdPercentage * windowHeight) / 100;
+
+      const itemsPositions = items.map(({ id, ref }) => {
+        const element = ref?.current;
+        if (!element) return null;
+
+        const boundingRect = element.getBoundingClientRect();
+
+        return {
+          id,
+          top: boundingRect.top,
+          bottom: boundingRect.bottom,
+        };
+      });
+
+      const activeItem = itemsPositions.find(({ top: itemTop, bottom: itemBottom }) => {
+        return itemTop < viewingPosition && itemBottom > viewingPosition;
+      });
+
+      if (!activeItem?.id && (options?.overBounds || DEFAULT_OPTIONS.overBounds) === true) {
+        const firstItem = itemsPositions[0];
+        const lastItem = itemsPositions[itemsPositions.length - 1];
+
+        if (viewingPosition < firstItem.top) {
+          setActiveId(firstItem.id);
+        }
+
+        if (viewingPosition > lastItem.bottom) {
+          setActiveId(lastItem.id);
+        }
+      } else {
+        setActiveId(activeItem?.id);
+      }
+    };
+
+    scrollListener();
+
+    window.addEventListener('resize', scrollListener);
+    window.addEventListener('scroll', scrollListener);
+
+    return () => {
+      window.removeEventListener('resize', scrollListener);
+      window.removeEventListener('scroll', scrollListener);
+    };
+  }, [items, options]);
+
+  return activeId;
+};
+
+export default useScrollSpy;

From dd473c039d47b49bab410470d3df792531d0c0b1 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 15:21:59 +0000
Subject: [PATCH 2/8] Add support to the static page layout to use spy scroll

---
 frontend/src/layouts/static-page.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
index dce992c3..8667da04 100644
--- a/frontend/src/layouts/static-page.tsx
+++ b/frontend/src/layouts/static-page.tsx
@@ -10,13 +10,15 @@ import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
 type SidebarProps = {
   sections: {
     [key: string]: {
+      id: string;
       name: string;
       ref: MutableRefObject<HTMLDivElement>;
     };
   };
+  activeSection?: string;
 };
 
-const Sidebar: React.FC<SidebarProps> = ({ sections }) => {
+const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection }) => {
   if (!sections) return null;
 
   const handleClick = (key) => {
@@ -28,7 +30,7 @@ const Sidebar: React.FC<SidebarProps> = ({ sections }) => {
   return (
     <div className="-mb-6 min-w-[200px] px-8 md:mb-0 md:px-0">
       <nav className="sticky top-10 bottom-3 my-10 flex flex-col gap-3 font-mono text-sm">
-        {Object.entries(sections).map(([key, { name }]) => {
+        {Object.entries(sections).map(([key, { id, name }]) => {
           return (
             <button
               key={key}
@@ -37,7 +39,7 @@ const Sidebar: React.FC<SidebarProps> = ({ sections }) => {
               onClick={() => handleClick(key)}
             >
               <Icon icon={ArrowRight} className="h-6 fill-black" />
-              <span className="pt-1">{name}</span>
+              <span className={cn('pt-1', { 'font-bold': id === activeSection })}>{name}</span>
             </button>
           );
         })}

From 3522ff89c94478708889879effd4103b59c94a35 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 12:59:35 +0000
Subject: [PATCH 3/8] Highlight side navigation in the home and about pages,
 via spy scroll

---
 frontend/src/pages/about/index.tsx | 10 +++++++++-
 frontend/src/pages/index.tsx       |  8 +++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx
index 62262dcd..83600432 100644
--- a/frontend/src/pages/about/index.tsx
+++ b/frontend/src/pages/about/index.tsx
@@ -17,6 +17,7 @@ import HighlightedText from '@/containers/about/highlighted-text';
 import Logo from '@/containers/about/logo';
 import LogosGrid from '@/containers/about/logos-grid';
 import QuestionsList from '@/containers/about/questions-list';
+import useScrollSpy from '@/hooks/use-scroll-spy';
 import Layout, { Sidebar, Content } from '@/layouts/static-page';
 import {
   getGetStaticIndicatorsQueryKey,
@@ -50,27 +51,34 @@ const About: React.FC = ({
 }) => {
   const sections = {
     definition: {
+      id: 'definition',
       name: 'Definition',
       ref: useRef<HTMLDivElement>(null),
     },
     problem: {
+      id: 'problem',
       name: 'Problem',
       ref: useRef<HTMLDivElement>(null),
     },
     dataPartners: {
+      id: 'data-partners',
       name: 'Data Partners',
       ref: useRef<HTMLDivElement>(null),
     },
     futureObjectives: {
+      id: 'future-objectives',
       name: 'Future Objectives',
       ref: useRef<HTMLDivElement>(null),
     },
     teamAndFunders: {
+      id: 'teams-and-funders',
       name: 'Team & Funders',
       ref: useRef<HTMLDivElement>(null),
     },
   };
 
+  const scrollActiveId = useScrollSpy(Object.values(sections).map(({ id, ref }) => ({ id, ref })));
+
   const handleIntroScrollClick = () => {
     sections.definition?.ref?.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -105,7 +113,7 @@ const About: React.FC = ({
         />
       }
     >
-      <Sidebar sections={sections} />
+      <Sidebar sections={sections} activeSection={scrollActiveId} />
       <Content>
         <Section ref={sections.definition.ref}>
           <SectionTitle>What is 30x30</SectionTitle>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 752b5cb7..2d473fd2 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -16,6 +16,7 @@ import EarthSurfaceCoverage from '@/containers/homepage/earth-surface-coverage';
 import InteractiveMap from '@/containers/homepage/interactive-map';
 import Intro from '@/containers/homepage/intro';
 import LinkCards from '@/containers/homepage/link-cards';
+import useScrollSpy from '@/hooks/use-scroll-spy';
 import Layout, { Content, Sidebar } from '@/layouts/static-page';
 import {
   getGetStaticIndicatorsQueryKey,
@@ -58,19 +59,24 @@ const Home: React.FC = ({
 }) => {
   const sections = {
     services: {
+      id: 'services',
       name: 'Services',
       ref: useRef<HTMLDivElement>(null),
     },
     context: {
+      id: 'context',
       name: 'Context',
       ref: useRef<HTMLDivElement>(null),
     },
     impact: {
+      id: 'impact',
       name: 'Impact',
       ref: useRef<HTMLDivElement>(null),
     },
   };
 
+  const scrollActiveId = useScrollSpy(Object.values(sections).map(({ id, ref }) => ({ id, ref })));
+
   const handleIntroScrollClick = () => {
     sections.services?.ref?.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -106,7 +112,7 @@ const Home: React.FC = ({
         />
       }
     >
-      <Sidebar sections={sections} />
+      <Sidebar sections={sections} activeSection={scrollActiveId} />
       <Content>
         <Section ref={sections.services.ref}>
           <SectionTitle>An entry point for 30x30</SectionTitle>

From b6cb41cd1bc50e69f3e39067e0f2d5528631df3c Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 15:37:13 +0000
Subject: [PATCH 4/8] Dynamic arrows for the home and about sidebar navigation

---
 frontend/src/layouts/static-page.tsx | 13 +++++++++++--
 frontend/src/pages/about/index.tsx   |  2 +-
 frontend/src/pages/index.tsx         |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
index 8667da04..3672e0c1 100644
--- a/frontend/src/layouts/static-page.tsx
+++ b/frontend/src/layouts/static-page.tsx
@@ -7,6 +7,12 @@ import Icon from '@/components/ui/icon';
 import { cn } from '@/lib/classnames';
 import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
 
+const ARROW_COLORS = {
+  black: 'black',
+  orange: 'orange',
+  purple: 'purple-400',
+};
+
 type SidebarProps = {
   sections: {
     [key: string]: {
@@ -16,9 +22,10 @@ type SidebarProps = {
     };
   };
   activeSection?: string;
+  arrowColor?: 'black' | 'orange' | 'purple';
 };
 
-const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection }) => {
+const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection, arrowColor = 'black' }) => {
   if (!sections) return null;
 
   const handleClick = (key) => {
@@ -38,7 +45,9 @@ const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection }) => {
               type="button"
               onClick={() => handleClick(key)}
             >
-              <Icon icon={ArrowRight} className="h-6 fill-black" />
+              {id === activeSection && (
+                <Icon icon={ArrowRight} className={`h-6 text-${ARROW_COLORS[arrowColor]}`} />
+              )}
               <span className={cn('pt-1', { 'font-bold': id === activeSection })}>{name}</span>
             </button>
           );
diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx
index 83600432..3d6021fe 100644
--- a/frontend/src/pages/about/index.tsx
+++ b/frontend/src/pages/about/index.tsx
@@ -113,7 +113,7 @@ const About: React.FC = ({
         />
       }
     >
-      <Sidebar sections={sections} activeSection={scrollActiveId} />
+      <Sidebar sections={sections} activeSection={scrollActiveId} arrowColor="purple" />
       <Content>
         <Section ref={sections.definition.ref}>
           <SectionTitle>What is 30x30</SectionTitle>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 2d473fd2..3ac448cf 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -112,7 +112,7 @@ const Home: React.FC = ({
         />
       }
     >
-      <Sidebar sections={sections} activeSection={scrollActiveId} />
+      <Sidebar sections={sections} activeSection={scrollActiveId} arrowColor={'orange'} />
       <Content>
         <Section ref={sections.services.ref}>
           <SectionTitle>An entry point for 30x30</SectionTitle>

From 499187c17316464494b0de18e132806f96a5c49c Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 15:42:03 +0000
Subject: [PATCH 5/8] Bolden font on the sidebar navigation when hovering an
 item

---
 frontend/src/layouts/static-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
index 3672e0c1..40bfa715 100644
--- a/frontend/src/layouts/static-page.tsx
+++ b/frontend/src/layouts/static-page.tsx
@@ -48,7 +48,7 @@ const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection, arrowColor =
               {id === activeSection && (
                 <Icon icon={ArrowRight} className={`h-6 text-${ARROW_COLORS[arrowColor]}`} />
               )}
-              <span className={cn('pt-1', { 'font-bold': id === activeSection })}>{name}</span>
+              <span className={cn('pt-1 hover:font-bold', { 'font-bold': id === activeSection })}>{name}</span>
             </button>
           );
         })}

From e5e576d8854cb10631015661bd918cd0b744ee49 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 15:44:46 +0000
Subject: [PATCH 6/8] Fix linting issues

---
 frontend/src/layouts/static-page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
index 40bfa715..96d8859a 100644
--- a/frontend/src/layouts/static-page.tsx
+++ b/frontend/src/layouts/static-page.tsx
@@ -48,7 +48,9 @@ const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection, arrowColor =
               {id === activeSection && (
                 <Icon icon={ArrowRight} className={`h-6 text-${ARROW_COLORS[arrowColor]}`} />
               )}
-              <span className={cn('pt-1 hover:font-bold', { 'font-bold': id === activeSection })}>{name}</span>
+              <span className={cn('pt-1 hover:font-bold', { 'font-bold': id === activeSection })}>
+                {name}
+              </span>
             </button>
           );
         })}

From 37b85a519facfc80305a23aa4a14aec8694efc2e Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 15:53:33 +0000
Subject: [PATCH 7/8] Fix issues with side navigation arrow colors not
 displaying correctly

---
 frontend/src/layouts/static-page.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
index 96d8859a..9f000e62 100644
--- a/frontend/src/layouts/static-page.tsx
+++ b/frontend/src/layouts/static-page.tsx
@@ -7,12 +7,6 @@ import Icon from '@/components/ui/icon';
 import { cn } from '@/lib/classnames';
 import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
 
-const ARROW_COLORS = {
-  black: 'black',
-  orange: 'orange',
-  purple: 'purple-400',
-};
-
 type SidebarProps = {
   sections: {
     [key: string]: {
@@ -46,7 +40,14 @@ const Sidebar: React.FC<SidebarProps> = ({ sections, activeSection, arrowColor =
               onClick={() => handleClick(key)}
             >
               {id === activeSection && (
-                <Icon icon={ArrowRight} className={`h-6 text-${ARROW_COLORS[arrowColor]}`} />
+                <Icon
+                  icon={ArrowRight}
+                  className={cn('h-6', {
+                    'text-black': arrowColor === 'black',
+                    'text-orange': arrowColor === 'orange',
+                    'text-purple-400': arrowColor === 'purple',
+                  })}
+                />
               )}
               <span className={cn('pt-1 hover:font-bold', { 'font-bold': id === activeSection })}>
                 {name}

From eb54adcb6b818f41f754b72ea3dff36772dd73cf Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Thu, 15 Feb 2024 16:02:15 +0000
Subject: [PATCH 8/8] Change spyscroll threshold percentage

---
 frontend/src/hooks/use-scroll-spy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/hooks/use-scroll-spy.ts b/frontend/src/hooks/use-scroll-spy.ts
index 330ccc44..7793fc89 100644
--- a/frontend/src/hooks/use-scroll-spy.ts
+++ b/frontend/src/hooks/use-scroll-spy.ts
@@ -11,7 +11,7 @@ type ScrollSpyOptions = {
 
 const DEFAULT_OPTIONS = {
   overBounds: true,
-  thresholdPercentage: 50,
+  thresholdPercentage: 20,
 };
 
 const useScrollSpy = (items: ScrollSpyItem[], options?: ScrollSpyOptions) => {