remove nav listener on unmount

src/components/ButtonElement.jsx

@@ -5,7 +5,7 @@ export const Button = styled(Link)`
     border-radius: 50px;
     background: ${({ primary }) => (primary ? "#01BF71" : "#010606")};
     white-space: nowrap;
-    padding: ${({ big }) => (big ? " 14px 48px" : "12px 30px")};
+    padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
     color: ${({ dark }) => (dark ? "#010106" : "#fff")};
     font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
     outline: none;

src/components/HeroSection/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import img from "../../images/F23.prince.learning.turquoise.jpg";
 import {
     HeroCitationBlock,
@@ -124,7 +123,7 @@ export default function HeroSection() {
                         <HeroCitationBlock>
                             <pre>
                                 <code>
-                                    <React.Fragment>{citation}</React.Fragment>
+                                    <>{citation}</>
                                 </code>
                             </pre>
                         </HeroCitationBlock>

src/components/NavBar/index.jsx

@@ -15,16 +15,20 @@ import {
 export default function NavBar({ toggle }) {
     const [scrollNav, setScrollNav] = useState(false);
 
-    const changeNav = () => {
-        if (window.scrollY >= 80) {
-            setScrollNav(true);
-        } else {
-            setScrollNav(false);
-        }
-    };
-
     useEffect(() => {
+        const changeNav = () => {
+            if (window.scrollY >= 80) {
+                setScrollNav(true);
+            } else {
+                setScrollNav(false);
+            }
+        };
+
         window.addEventListener("scroll", changeNav);
+
+        return () => {
+            window.removeEventListener("scroll", changeNav);
+        };
     }, []);
 
     const toggleHome = () => {

src/components/Notebooks/NotebookElements.jsx

@@ -14,7 +14,7 @@ export const NotebookWrapper = styled.div`
     display: grid;
     z-index: 1;
     /* height: 1250px; */
-    width: 100% ;
+    width: 100%;
     max-width: 1100px;
     margin-right: auto;
     margin-left: auto;
@@ -62,7 +62,7 @@ export const Column2 = styled.p`
 `
 
 export const TextWrapper = styled.div`
-    max-width: 540px ;
+    max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
 `

src/components/ScrollToTop.jsx

@@ -5,7 +5,7 @@ export default function ScrollToTop() {
     const { pathname } = useLocation();
 
     useEffect(() => {
-        window.scrollTo(0, 0, {});
+        window.scrollTo(0, 0, { behavior: "smooth" });
     }, [pathname]);
 
     return null;