fixed navbar to snap to the center of its target section on click, ma…

…de merch carousel static unless more than 3 images are added to it
brycesexton · Sep 10, 2024 · 0e881c9 · 0e881c9
1 parent 88d971d
commit 0e881c9
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 35 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Adamina&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:[email protected]&display=swap" rel="stylesheet">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-<script defer src="js/dist/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_getU-efc6cb.b6ef0f44ae728aa0791f.js?4111589faf312f491629"></script><script defer src="js/dist/App.80986d731669b2922556.js?4111589faf312f491629"></script><script defer src="js/dist/main.0177eeb3983c34ee0494.js?4111589faf312f491629"></script></head>
+<script defer src="js/dist/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_getU-efc6cb.b6ef0f44ae728aa0791f.js?7e8667d523b26839a963"></script><script defer src="js/dist/App.f9b63c91031b8b1be39c.js?7e8667d523b26839a963"></script><script defer src="js/dist/main.0177eeb3983c34ee0494.js?7e8667d523b26839a963"></script></head>
 
 <body>
   <div id="app"></div>

diff --git a/public/js/dist/App.8a77f1d840f0ada7854486d2a15767e0.js.map b/public/js/dist/App.8a77f1d840f0ada7854486d2a15767e0.js.map
diff --git a/public/js/dist/App.9f35b1d79d023bba87b7eda1f0664607.js.map b/public/js/dist/App.9f35b1d79d023bba87b7eda1f0664607.js.map
diff --git a/public/js/dist/App.80986d731669b2922556.js → public/js/dist/App.f9b63c91031b8b1be39c.js b/public/js/dist/App.80986d731669b2922556.js → public/js/dist/App.f9b63c91031b8b1be39c.js
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -4,7 +4,7 @@ import styles from './Footer.module.scss'
 function Footer() {
   return (
     <div className={styles.Footer}>
-        <p>©2024 Forester. Site by BT Web Dev</p>
+        <p>©2024 Forester. Site by BT Dev</p>
     </div>
   )
 }

diff --git a/src/components/MerchCarousel/MerchCarousel.js b/src/components/MerchCarousel/MerchCarousel.js
@@ -6,26 +6,37 @@ const MerchCarousel = ({ isFaded }) => {
     { src: '/img/hat1.png', alt: 'Image 1', link: 'https://forestermerch.com/products/lose-your-mind-find-your-soul-hat' },
     { src: '/img/hat2.png', alt: 'Image 2', link: 'https://forestermerch.com/products/forester-5-panel-hat' },
     { src: '/img/hoodie.png', alt: 'Image 3', link: 'https://forestermerch.com/products/sequoia-hoodie' },
+    //add as many merch images as you see fit, the carousel will display up to 3 images at a time on screen
   ];
 
-  const extendedImages = [...images, ...images, ...images];
+  const visibleImages = images.length > 3 ? images : images.slice(0, 3);
+
+  const extendedImages = images.length > 3 ? [...visibleImages, ...visibleImages, ...visibleImages] : visibleImages;
 
   const [currentIndex, setCurrentIndex] = useState(0);
+  const shouldScroll = images.length > 3; 
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % (images.length * 3));
-    }, 3000); 
+    let interval;
+    if (shouldScroll) {
+      interval = setInterval(() => {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % (visibleImages.length * 3)); 
+      }, 3000); 
+    }
 
-    return () => clearInterval(interval); 
-  }, [images.length]);
+    return () => {
+      if (interval) clearInterval(interval); 
+    };
+  }, [shouldScroll, visibleImages.length]);
 
   return (
     <div id="store" className={isFaded ? `${styles.faded} ${styles.carouselContainer}` : `${styles.carouselContainer}`}>
       <div className={styles.carousel}>
         <div
           className={styles.carouselInner}
-          style={{ transform: `translateX(-${(currentIndex % images.length) * (100 / 3)}%)` }}
+          style={{
+            transform: `translateX(-${shouldScroll ? (currentIndex % visibleImages.length) * (100 / 3) : 0}%)`,
+          }}
         >
           {extendedImages.map((image, index) => (
             <div className={styles.carouselItem} key={index} style={{ flex: '0 0 33.33%' }}>
@@ -36,17 +47,19 @@ const MerchCarousel = ({ isFaded }) => {
           ))}
         </div>
       </div>
-      <div className={styles.dotsContainer}>
-        {Array.from({ length: Math.ceil(images.length / 3) }).map((_, index) => (
-          <div
-            key={index}
-            className={`${styles.dot} ${currentIndex % images.length === index * 3 ? styles.active : ''}`}
-            onClick={() => setCurrentIndex(index * 3)}
-          ></div>
-        ))}
-      </div>
+      {shouldScroll && (
+        <div className={styles.dotsContainer}>
+          {Array.from({ length: Math.ceil(visibleImages.length / 3) }).map((_, index) => (
+            <div
+              key={index}
+              className={`${styles.dot} ${currentIndex % visibleImages.length === index * 3 ? styles.active : ''}`}
+              onClick={() => setCurrentIndex(index * 3)}
+            ></div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
 
-export default MerchCarousel;
+export default MerchCarousel;
diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js
@@ -45,7 +45,8 @@ function NavBar() {
   const handleNavigationClick = (event, targetId) => {
     event.preventDefault();
     const targetElement = document.querySelector(targetId);
-    const offsetPosition = targetElement.getBoundingClientRect().top + window.scrollY - (window.innerHeight / 3.8);
+    const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;
+    const offsetPosition = elementPosition - (window.innerHeight / 2) + (targetElement.offsetHeight / 2);
 
     window.scrollTo({
       top: offsetPosition,