scrolling and general nav within projects now complete / functional

Author: JS-GitRepo

src/components/HVContent.tsx

@@ -1,10 +1,4 @@
-import {
-  MutableRefObject,
-  SetStateAction,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { SetStateAction, useContext, useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import "./styles/HVContent.css";
 import Deerfall from "./projects/Deerfall";
@@ -22,13 +16,13 @@ interface Props {
 }
 
 const HVContent = ({ project, isIntro, allParams }: Props) => {
-  // - - - - STATES - - - -
+  // = = = = = NAVIGATION = = = = =
   const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
+  const [currentNav, setCurrentNav] = useState<string>("media");
+  const [scrollIsBuffering, setScrollIsBuffering] = useState(false);
+  const { scrollRefs, hueRotation } = useContext(AppContext);
   const location = useLocation();
   const navigate = useNavigate();
-  // - - - - CONTEXT - - - -
-  const { scrollRefs, hueRotation } = useContext(AppContext);
-  const [scrollIsBuffering, setScrollIsBuffering] = useState(false);
   const observerOptions: IntersectionObserverInit = {
     threshold: 0.5,
     root: null,
@@ -55,7 +49,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
     false
   );
 
-  // - - - - PROJECTS - - - -
+  // = = = = = PROJECTS = = = = =
   const allProjList = {
     intro: <Introduction />,
     deerfall: <Deerfall isPortfolio={isPortfolio} />,
@@ -69,7 +63,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
   };
   const [localProject, setLocalProject] = useState<string>("");
   const [show, setShow] = useState<boolean>(true);
-  // - - - - TRANSITIONS - - - -
+  // = = = = = TRANSITIONS = = = = =
   const transitionFade = useTransition(show, {
     from: { opacity: 0 },
     enter: { opacity: 1 },
@@ -89,7 +83,10 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
   };
 
   const scrollToElement = (ref: React.MutableRefObject<any>) => {
-    ref.current?.scrollIntoView({ behavior: "smooth" });
+    ref.current?.scrollIntoView({
+      behavior: "smooth",
+    });
+    console.log("scrollToElement Triggered");
   };
 
   // = = = = = USE EFFECTS = = = = =
@@ -116,42 +113,41 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
   useEffect(() => {
     if (mediaScrollObserver?.isIntersecting && !scrollIsBuffering) {
       navigate(`${location.pathname}#media`);
-    }
-  }, [mediaScrollObserver?.isIntersecting]);
-
-  useEffect(() => {
-    if (techScrollObserver?.isIntersecting && !scrollIsBuffering)
+    } else if (techScrollObserver?.isIntersecting && !scrollIsBuffering) {
       navigate(`${location.pathname}#tech`);
-  }, [techScrollObserver?.isIntersecting]);
-
-  useEffect(() => {
-    if (blogScrollObserver?.isIntersecting && !scrollIsBuffering)
+    } else if (blogScrollObserver?.isIntersecting && !scrollIsBuffering) {
       navigate(`${location.pathname}#blog`);
-  }, [blogScrollObserver?.isIntersecting]);
-
-  useEffect(() => {
-    if (aboutScrollObserver?.isIntersecting && !scrollIsBuffering)
+    } else if (aboutScrollObserver?.isIntersecting && !scrollIsBuffering) {
       navigate(`${location.pathname}#about`);
-  }, [aboutScrollObserver?.isIntersecting]);
+    }
+  }, [
+    mediaScrollObserver?.isIntersecting,
+    techScrollObserver?.isIntersecting,
+    blogScrollObserver?.isIntersecting,
+    aboutScrollObserver?.isIntersecting,
+  ]);
 
   useEffect(() => {
+    setScrollIsBuffering(true);
     if (location.hash === "#media") {
       scrollToElement(scrollRefs.media);
+      setCurrentNav("media");
     } else if (location.hash === "#tech") {
       scrollToElement(scrollRefs.tech);
+      setCurrentNav("tech");
     } else if (location.hash === "#about") {
       scrollToElement(scrollRefs.about);
+      setCurrentNav("about");
     } else if (location.hash === "#blog") {
       scrollToElement(scrollRefs.blog);
+      setCurrentNav("blog");
     }
-    console.log(location.hash);
   }, [location.hash]);
 
   useEffect(() => {
     if (scrollIsBuffering) {
-      setTimeout(() => setScrollIsBuffering(false), 800);
+      setTimeout(() => setScrollIsBuffering(false), 500);
     }
-    console.log(scrollIsBuffering);
   }, [scrollIsBuffering]);
 
   return (
@@ -162,9 +158,9 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
         <HVSideNav
           isPortfolio={isPortfolio}
           allParams={allParams}
-          scrollRefs={scrollRefs}
           hueRotation={hueRotation}
-          scrollToElement={scrollToElement}
+          currentNav={currentNav}
+          setCurrentNav={setCurrentNav}
           setScrollIsBuffering={setScrollIsBuffering}
         />
       )}

src/components/HVSideNav.tsx

@@ -5,27 +5,26 @@ import aboutIcon from "../img/navIcons/about.png";
 import blogIcon from "../img/navIcons/blog.png";
 import { animated, useSpring } from "react-spring";
 import { useEffect, useState } from "react";
-import { ScrollRefs, HueRotation } from "../models/Models";
+import { HueRotation } from "../models/Models";
 import { useLocation, useNavigate } from "react-router-dom";
 
 interface Props {
-  scrollRefs: ScrollRefs;
   hueRotation: HueRotation;
   isPortfolio: boolean;
   allParams: string[];
-  scrollToElement: (ref: React.MutableRefObject<any>) => void;
+  currentNav: string;
+  setCurrentNav: React.Dispatch<React.SetStateAction<string>>;
   setScrollIsBuffering: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const HVSideNav = ({
   isPortfolio,
   allParams,
-  scrollRefs,
   hueRotation,
-  scrollToElement,
+  currentNav,
+  setCurrentNav,
   setScrollIsBuffering,
 }: Props) => {
-  const [hlNav, setHLNav] = useState("media");
   const navigate = useNavigate();
   const location = useLocation();
   const navSizeChange = useSpring({
@@ -35,26 +34,14 @@ const HVSideNav = ({
     reverse: isPortfolio,
   });
 
-  // const handleNavClick = (
-  //   ref: React.MutableRefObject<any>,
-  //   navName: string
-  // ) => {
-  //   scrollToElement(ref);
-  //   setHLNav(navName);
-  // };
-
-  const handleNavClick = (
-    ref: React.MutableRefObject<any>,
-    navName: string
-  ) => {
-    navigate(`${location.pathname}#${navName}`);
+  const navigateToSection = (navName: string) => {
     setScrollIsBuffering(true);
-    setHLNav(navName);
+    navigate(`${location.pathname}#${navName}`);
+    setCurrentNav(navName);
   };
 
   useEffect(() => {
-    navigate(`${location.pathname}#media`);
-    setHLNav("media");
+    navigateToSection("media");
   }, [allParams[1]]);
 
   return (
@@ -63,27 +50,27 @@ const HVSideNav = ({
         <ul>
           <li>
             <animated.img
-              onClick={() => handleNavClick(scrollRefs.media, "media")}
+              onClick={() => navigateToSection("media")}
               className='nav-icon'
-              style={hlNav === "media" ? hueRotation : {}}
+              style={currentNav === "media" ? hueRotation : {}}
               src={mediaIcon}
               alt='media navigation icon'
             />
           </li>
           <li>
             <animated.img
-              onClick={() => handleNavClick(scrollRefs.tech, "tech")}
+              onClick={() => navigateToSection("tech")}
               className='nav-icon'
-              style={hlNav === "tech" ? hueRotation : {}}
+              style={currentNav === "tech" ? hueRotation : {}}
               src={techIcon}
               alt='technologies and skills navigation icon'
             />
           </li>
           <li>
             <animated.img
-              onClick={() => handleNavClick(scrollRefs.about, "about")}
+              onClick={() => navigateToSection("about")}
               className='nav-icon'
-              style={hlNav === "about" ? hueRotation : {}}
+              style={currentNav === "about" ? hueRotation : {}}
               src={aboutIcon}
               alt='about project navigation icon'
             />
@@ -93,18 +80,18 @@ const HVSideNav = ({
         <ul>
           <li>
             <animated.img
-              onClick={() => handleNavClick(scrollRefs.media, "media")}
+              onClick={() => navigateToSection("media")}
               className='nav-icon'
-              style={hlNav === "media" ? hueRotation : {}}
+              style={currentNav === "media" ? hueRotation : {}}
               src={mediaIcon}
               alt='media navigation icon'
             />
           </li>
           <li>
             <animated.img
-              onClick={() => handleNavClick(scrollRefs.blog, "blog")}
+              onClick={() => navigateToSection("blog")}
               className='nav-icon'
-              style={hlNav === "blog" ? hueRotation : {}}
+              style={currentNav === "blog" ? hueRotation : {}}
               src={blogIcon}
               alt='media navigation icon'
             />

src/components/projects/subComponents/Project.css

@@ -13,6 +13,7 @@ li {
   width: 100%;
   height: 100%;
   overflow: scroll;
+  scroll-snap-type: y proximity;
 }
 
 .Project .proj-nav {
@@ -53,13 +54,17 @@ li {
 }
 
 .Project .content-section {
+  /* display */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
+  scroll-snap-align: start;
+  /* sizing */
   height: 100%;
   width: 100%;
+  /* style */
   border: 1px black dashed;
   /* padding-bottom: 35%; */
 }