From 976fa01d05b83fdf1f67ce85cfb0928e3a1728c8 Mon Sep 17 00:00:00 2001
From: jarenadams21 <jarenadams3@gmail.com>
Date: Thu, 19 Oct 2023 17:46:52 -0400
Subject: [PATCH 1/2] about title scrolls to entire about section on click

---
 .../frontend/src/pages/mapPage/About.tsx            | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx b/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx
index 586059f..e2cce1c 100644
--- a/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx
+++ b/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx
@@ -1,5 +1,16 @@
+import { useRef } from "react";
+
 export default function About() {
 
+  const aboutSection = useRef(null)
+
+  /* Scrolls to the element that executed this function */
+  function executeScrollTo(e: any) {
+      e.preventDefault();
+      const aboutTitle: HTMLElement = e.target as HTMLElement
+      aboutTitle.scrollIntoView({behavior: 'smooth'});
+  }
+
   const title = {
     color: 'var(--Text-Primary, #091F2F)',
     fontFamily: 'Montserrat',
@@ -42,7 +53,7 @@ export default function About() {
         background: 'white'
       }}
     >
-      <p style={title}><u>ABOUT: ADOPT-A-GREEN INFRASTRUCTURE AND FEATURE VIEWER</u></p>
+      <p ref={aboutSection} onClick={executeScrollTo} style={title}><u>ABOUT: ADOPT-A-GREEN INFRASTRUCTURE AND FEATURE VIEWER</u></p>
       <p style={headings}>Setting the Scene and Brief History: <br />
         <div style={content}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

From e45d498247d43a0d51c2ab816b0673cdcf5a331f Mon Sep 17 00:00:00 2001
From: jarenadams21 <jarenadams3@gmail.com>
Date: Wed, 25 Oct 2023 10:05:54 -0400
Subject: [PATCH 2/2] using window.scrollTo instead to apply top offset

---
 .../frontend/src/pages/mapPage/About.tsx                    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx b/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx
index e2cce1c..08b711f 100644
--- a/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx
+++ b/apps/green-infrastructure/frontend/src/pages/mapPage/About.tsx
@@ -1,5 +1,8 @@
 import { useRef } from "react";
 
+const SCROLL_OFFSET = 20
+const NAVBAR_HEIGHT = 109
+
 export default function About() {
 
   const aboutSection = useRef(null)
@@ -8,7 +11,8 @@ export default function About() {
   function executeScrollTo(e: any) {
       e.preventDefault();
       const aboutTitle: HTMLElement = e.target as HTMLElement
-      aboutTitle.scrollIntoView({behavior: 'smooth'});
+      const yPos = aboutTitle.getBoundingClientRect().top + window.scrollY - (NAVBAR_HEIGHT + SCROLL_OFFSET)
+      window.scrollTo({top: yPos, behavior: 'smooth'} )
   }
 
   const title = {