prevent scrolling

gatsby-browser.js

@@ -8,47 +8,18 @@ import Modals from "./src/components/Modals"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import PrefetchData from "./src/components/PrefetchData"
 import PageLayout from "./src/components/PageLayout"
+import { useBrowserStore } from "./src/store"
 
 // Logs when the client route changes
 export function onRouteUpdate({ location, prevLocation }) {
   console.log("[Layout] render")
-  console.log("[gatsby-browser]@onRouteUpdate new pathname", location.pathname)
-
-  // let view = null
-  // let viewId = null
-  // // update zustand with search params, if any
-  // if (location.search) {
-  //   const params = new URLSearchParams(location.search)
-  //   const paramView = params.get("view")
-  //   const paramViewId = params.get("viewId")
-
-  //   if (AvailableModalsViews.includes(paramView)) {
-  //     console.log("[gatsby-browser]@onRouteUpdate view:", paramView)
-  //     view = String(paramView)
-  //   } else {
-  //     console.log(
-  //       "[gatsby-browser]@onRouteUpdate view not recognized, close everything:",
-  //       paramView
-  //     )
-  //   }
-
-  //   // test view id against a regex (lowercase letters and numbers, only trailing slash)
-  //   if (paramViewId && /^[a-z0-9-]+$/.test(paramViewId)) {
-  //     console.log("[gatsby-browser]@onRouteUpdate viewId:", paramViewId)
-  //     viewId = String(paramViewId)
-  //   } else {
-  //     console.log(
-  //       "[gatsby-browser]@onRouteUpdate viewId not recognized, close everything:",
-  //       paramViewId
-  //     )
-  //   }
-  // }
-
-  // always update store with view and viewId
-  // useBrowserStore.setState({
-  //   view,
-  //   viewId,
-  // })
+  console.log(
+    "[gatsby-browser]@onRouteUpdate new pathname",
+    location.pathname,
+    "prev pathname",
+    prevLocation?.pathname
+  )
+  useBrowserStore.getState().setPath(location.pathname, prevLocation?.pathname)
 }
 
 // Create a client

src/components/Layout.js

@@ -6,11 +6,12 @@ import Wall from "./Wall"
 
 const Layout = ({ children }) => {
   console.log("[Layout] render")
+
   return (
     <>
       <Header />
       <Wall />
-      <main>{children}</main>
+      <main className="position-fixed">{children}</main>
       <Footer />
       <Background />
     </>

src/components/PageLayout.js

@@ -1,6 +1,7 @@
-import { Link } from "gatsby"
+import { Link, navigate } from "gatsby"
 import React, { useEffect, useRef, useState } from "react"
 import { Button, Modal } from "react-bootstrap"
+import { useBrowserStore } from "../store"
 
 // const PageLayout = ({ children, path, pageContext }) => {
 //   if (path == "/") {
@@ -26,37 +27,33 @@ import { Button, Modal } from "react-bootstrap"
 
 const PageLayout = ({ children, path, pageContext }) => {
   console.log("[PageLayout] render props")
+  const previousPathname = useBrowserStore((state) => state.previousPathname)
   const [show, setShow] = useState(true)
   const timerRef = useRef()
 
   const handleClose = () => {
     setShow(false)
     clearTimeout(timerRef.current)
     timerRef.current = setTimeout(() => {
-      window.history.back()
+      if (previousPathname) {
+        navigate(-1)
+      } else {
+        navigate("/")
+      }
     }, 800)
   }
-  useEffect(() => {
-    return () => {
-      clearTimeout(timerRef.current)
-    }
-  }, [])
+
   useEffect(() => {
     // scroll to 0 0
-    // window.scrollTo(0, 0)
     if (path === "/") {
       setShow(false)
     } else {
       setShow(true)
     }
-  }, [path])
-
-  useEffect(() => {
-    if ("scrollRestoration" in window.history) {
-      // Back off, browser, I got this...
-      window.history.scrollRestoration = "manual"
+    return () => {
+      clearTimeout(timerRef.current)
     }
-  }, [])
+  }, [path])
 
   return (
     <Modal
@@ -65,8 +62,6 @@ const PageLayout = ({ children, path, pageContext }) => {
       onHide={handleClose}
       backdrop="static"
       keyboard={false}
-      animation={false}
-      fullscreen="true"
       scrollable
     >
       <Modal.Header closeButton>

src/store.js

@@ -1,4 +1,3 @@
-import { use } from "marked"
 import { create } from "zustand"
 import { createJSONStorage, persist } from "zustand/middleware"
 
@@ -22,6 +21,12 @@ export const useBrowserStore = create((set) => ({
   setView(view) {
     set({ view })
   },
+  previousPathname: null,
+  pathname: null,
+
+  setPath(pathname, previousPathname = null) {
+    set({ pathname, previousPathname })
+  },
 }))
 
 export const useDataStore = create((set, get) => ({