Working Nav buttons

thimble-consulting · Sep 24, 2024 · fef0351 · fef0351
1 parent 16fc555
commit fef0351
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 87 deletions.
diff --git a/src/components/clients/ClientPageArrowButtons.jsx b/src/components/clients/ClientPageArrowButtons.jsx
@@ -0,0 +1,70 @@
+import React from 'react'
+
+export const onNextButtonClick = (parallaxRef) => {
+  let currentPage = getCurrentPage(parallaxRef)
+  let pageIndex = 0
+  if (currentPage % 1 === 0) {
+    pageIndex = currentPage + 1;
+  } else {
+    pageIndex = Math.ceil(getCurrentPage(parallaxRef));
+  }
+  parallaxRef.current.scrollTo(pageIndex)
+}
+
+export const onPrevButtonClick = (parallaxRef) => {
+  let currentPage = getCurrentPage(parallaxRef)
+  let pageIndex = 0
+  if (currentPage % 1 === 0) {
+    pageIndex = currentPage - 1;
+  } else {
+    pageIndex = Math.floor(getCurrentPage(parallaxRef));
+  }
+  parallaxRef.current.scrollTo(pageIndex)
+}
+
+export const PrevButton = (props) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className="embla__button embla__button--prev"
+      type="button"
+      {...restProps}
+    >
+      <svg className="embla__button__svg" viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}
+
+export const NextButton = (props) => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className="embla__button embla__button--next"
+      type="button"
+      {...restProps}
+    >
+      <svg className="embla__button__svg" viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}
+
+export const getCurrentPage = (parallaxRef) => {
+  const containerHeight = parallaxRef.current.space
+  const scrollYProgressRAW = parallaxRef.current.current / containerHeight
+  const scrollYProgress = Math.round(scrollYProgressRAW * 10) / 10
+  return scrollYProgress;
+};
diff --git a/src/templates/clientPage.js b/src/templates/clientPage.js
@@ -6,6 +6,13 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import Hero from "../components/Parallax/Hero.js";
 import Header from "../components/layout/Header.js";
 import ContactUsForm from "../components/ContactUsForm.js";
+import {
+  PrevButton,
+  NextButton,
+  onNextButtonClick,
+  onPrevButtonClick,
+  getCurrentPage
+} from "../components/clients/ClientPageArrowButtons.jsx"
 
 export default function Index({pageContext}) {
   const { client } = pageContext
@@ -59,87 +66,90 @@ export default function Index({pageContext}) {
   }, [])
 
   return (
-    <Parallax pages={PAGES} ref={parallaxRef} >
-      <Header className="max-w-6xl mx-auto px-4 md:px-6 lg:px-8" />
-      <ContactUsForm />
-      <Hero client={client}></Hero>
-      <ParallaxLayer
-        sticky={{ start: HERO_OFFSET, end: PAGES }}
-        style={{
-          width: "40%",
-          inset: "0% 0% 0% 100%",
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          justifySelf: 'end',
-          zIndex: zIndexOffset++,
-          right: 0,
-        }}
-      >
-        <div className="mr-20 w-full">
-          {logo(imgProps)}
-        </div>
-      </ParallaxLayer>
-
-      <ParallaxLayer
-        style={{
-          width: "full",
-          height: "1rem",
-          display: 'flex',
-          alignItems: 'start',
-          justifyContent: 'center',
-          zIndex: PAGES + 10,
-        }}
-        className="subHeader"
-        sticky={{ start: HERO_OFFSET, end: PAGES }}>
-        <div className="flex bg-gray-100 py-8 px-20 w-full uppercase text-xl font-light tracking-wider text-gray-800">
-          {transitions((style, i) => {
-            const Page = subHeadings[i]
-            return <Page style={style} />
-          })}
-        </div>
-      </ParallaxLayer>
-      {client.sections.map(section => {
-        return (
-          <>
-            {section.parallaxLayers.map((parallaxLayer, index) => {
-              return(
-                <ParallaxLayer
-                  style={{
-                    width: "60%",
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    textAlign: "center",
-                    zIndex: zIndexOffset++,
-                  }}
-                                    // sticky={{
-                  //   start: parallaxLayer.parallaxParams.stickyStart,
-                  //   end: parallaxLayer.parallaxParams.stickyEnd
-                  // }}>
-
-                  offset={ parallaxLayer.parallaxParams.stickyStart }>
-                  <div className={`flex flex-col justify-around gap-10 mx-20`}>
-                    {parallaxLayer.content.map((paragraph, index) => {
-                      index++;
-                      return(
-                        <div
-                          style={{
-                            zIndex: index,
-                          }}
-                          className="slideText">
-                          {paragraph}
-                        </div>
-                      )
-                    })}
-                  </div>
-                </ParallaxLayer>
-              )
+    <>
+      <div className='fixed bottom-0 right-0 z-50 flex p-5'>
+        <PrevButton onClick={(e) => onPrevButtonClick(parallaxRef)} className='p-5' />
+        <NextButton onClick={(e) => onNextButtonClick(parallaxRef)} className='p-5' />
+      </div>
+      <Parallax pages={PAGES} ref={parallaxRef}>
+        <Header className="max-w-6xl mx-auto px-4 md:px-6 lg:px-8" />
+        <ContactUsForm />
+        <Hero client={client}></Hero>
+
+        <ParallaxLayer
+          sticky={{ start: HERO_OFFSET, end: PAGES }}
+          style={{
+            width: "40%",
+            inset: "0% 0% 0% 100%",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            justifySelf: 'end',
+            zIndex: zIndexOffset++,
+            right: 0,
+          }}
+        >
+          <div className="mr-20 w-full">
+            {logo(imgProps)}
+          </div>
+        </ParallaxLayer>
+
+        <ParallaxLayer
+          style={{
+            width: "full",
+            height: "1rem",
+            display: 'flex',
+            alignItems: 'start',
+            justifyContent: 'center',
+            zIndex: PAGES + 10,
+          }}
+          className="subHeader"
+          sticky={{ start: HERO_OFFSET, end: PAGES }}>
+          <div className="flex bg-gray-100 py-8 px-20 w-full uppercase text-xl font-light tracking-wider text-gray-800">
+            {transitions((style, i) => {
+              const Page = subHeadings[i]
+              return <Page style={style} />
             })}
-          </>
-        )
-      })}
-    </Parallax>
+          </div>
+        </ParallaxLayer>
+        {client.sections.map(section => {
+          return (
+            <>
+              {section.parallaxLayers.map((parallaxLayer, index) => {
+                return(
+                  <ParallaxLayer
+                    style={{
+                      width: "60%",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      textAlign: "center",
+                      zIndex: zIndexOffset++,
+                    }}
+
+                    offset={ parallaxLayer.parallaxParams.stickyStart }>
+                    <div className={`flex flex-col justify-around gap-10 mx-20`}>
+                      {parallaxLayer.content.map((paragraph, index) => {
+                        index++;
+                        return(
+                          <div
+                            style={{
+                              zIndex: index,
+                            }}
+                            className="slideText">
+                            {paragraph}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </ParallaxLayer>
+                )
+              })}
+            </>
+          )
+        })}
+      </Parallax>
+    </>
   )
 }
 
@@ -179,10 +189,3 @@ const getTransitionConfig = (subHeaderNum, previousSubHeader) => {
     };
   }
 };
-
-const getCurrentPage = (parallaxRef) => {
-  const containerHeight = parallaxRef.current.space
-  const scrollYProgressRAW = parallaxRef.current.current / containerHeight
-  const scrollYProgress = Math.round(scrollYProgressRAW * 10) / 10
-  return scrollYProgress;
-};