Skip to content

Commit 0561bdb

Browse files
JS-GitRepoJS-GitRepo
committed
scrolling and general nav within projects now complete / functional
1 parent 6a2d794 commit 0561bdb

File tree

3 files changed

+53
-65
lines changed

3 files changed

+53
-65
lines changed

‎src/components/HVContent.tsx

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
MutableRefObject,
3-
SetStateAction,
4-
useContext,
5-
useEffect,
6-
useState,
7-
} from "react";
1+
import { SetStateAction, useContext, useEffect, useState } from "react";
82
import { animated, useTransition } from "react-spring";
93
import "./styles/HVContent.css";
104
import Deerfall from "./projects/Deerfall";
@@ -22,13 +16,13 @@ interface Props {
2216
}
2317

2418
const HVContent = ({ project, isIntro, allParams }: Props) => {
25-
// - - - - STATES - - - -
19+
// = = = = = NAVIGATION = = = = =
2620
const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
21+
const [currentNav, setCurrentNav] = useState<string>("media");
22+
const [scrollIsBuffering, setScrollIsBuffering] = useState(false);
23+
const { scrollRefs, hueRotation } = useContext(AppContext);
2724
const location = useLocation();
2825
const navigate = useNavigate();
29-
// - - - - CONTEXT - - - -
30-
const { scrollRefs, hueRotation } = useContext(AppContext);
31-
const [scrollIsBuffering, setScrollIsBuffering] = useState(false);
3226
const observerOptions: IntersectionObserverInit = {
3327
threshold: 0.5,
3428
root: null,
@@ -55,7 +49,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
5549
false
5650
);
5751

58-
// - - - - PROJECTS - - - -
52+
// = = = = = PROJECTS = = = = =
5953
const allProjList = {
6054
intro: <Introduction />,
6155
deerfall: <Deerfall isPortfolio={isPortfolio} />,
@@ -69,7 +63,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
6963
};
7064
const [localProject, setLocalProject] = useState<string>("");
7165
const [show, setShow] = useState<boolean>(true);
72-
// - - - - TRANSITIONS - - - -
66+
// = = = = = TRANSITIONS = = = = =
7367
const transitionFade = useTransition(show, {
7468
from: { opacity: 0 },
7569
enter: { opacity: 1 },
@@ -89,7 +83,10 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
8983
};
9084

9185
const scrollToElement = (ref: React.MutableRefObject<any>) => {
92-
ref.current?.scrollIntoView({ behavior: "smooth" });
86+
ref.current?.scrollIntoView({
87+
behavior: "smooth",
88+
});
89+
console.log("scrollToElement Triggered");
9390
};
9491

9592
// = = = = = USE EFFECTS = = = = =
@@ -116,42 +113,41 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
116113
useEffect(() => {
117114
if (mediaScrollObserver?.isIntersecting && !scrollIsBuffering) {
118115
navigate(`${location.pathname}#media`);
119-
}
120-
}, [mediaScrollObserver?.isIntersecting]);
121-
122-
useEffect(() => {
123-
if (techScrollObserver?.isIntersecting && !scrollIsBuffering)
116+
} else if (techScrollObserver?.isIntersecting && !scrollIsBuffering) {
124117
navigate(`${location.pathname}#tech`);
125-
}, [techScrollObserver?.isIntersecting]);
126-
127-
useEffect(() => {
128-
if (blogScrollObserver?.isIntersecting && !scrollIsBuffering)
118+
} else if (blogScrollObserver?.isIntersecting && !scrollIsBuffering) {
129119
navigate(`${location.pathname}#blog`);
130-
}, [blogScrollObserver?.isIntersecting]);
131-
132-
useEffect(() => {
133-
if (aboutScrollObserver?.isIntersecting && !scrollIsBuffering)
120+
} else if (aboutScrollObserver?.isIntersecting && !scrollIsBuffering) {
134121
navigate(`${location.pathname}#about`);
135-
}, [aboutScrollObserver?.isIntersecting]);
122+
}
123+
}, [
124+
mediaScrollObserver?.isIntersecting,
125+
techScrollObserver?.isIntersecting,
126+
blogScrollObserver?.isIntersecting,
127+
aboutScrollObserver?.isIntersecting,
128+
]);
136129

137130
useEffect(() => {
131+
setScrollIsBuffering(true);
138132
if (location.hash === "#media") {
139133
scrollToElement(scrollRefs.media);
134+
setCurrentNav("media");
140135
} else if (location.hash === "#tech") {
141136
scrollToElement(scrollRefs.tech);
137+
setCurrentNav("tech");
142138
} else if (location.hash === "#about") {
143139
scrollToElement(scrollRefs.about);
140+
setCurrentNav("about");
144141
} else if (location.hash === "#blog") {
145142
scrollToElement(scrollRefs.blog);
143+
setCurrentNav("blog");
146144
}
147-
console.log(location.hash);
148145
}, [location.hash]);
149146

150147
useEffect(() => {
151148
if (scrollIsBuffering) {
152-
setTimeout(() => setScrollIsBuffering(false), 800);
149+
setTimeout(() => setScrollIsBuffering(false), 500);
153150
}
154-
console.log(scrollIsBuffering);
155151
}, [scrollIsBuffering]);
156152

157153
return (
@@ -162,9 +158,9 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
162158
<HVSideNav
163159
isPortfolio={isPortfolio}
164160
allParams={allParams}
165-
scrollRefs={scrollRefs}
166161
hueRotation={hueRotation}
167-
scrollToElement={scrollToElement}
162+
currentNav={currentNav}
163+
setCurrentNav={setCurrentNav}
168164
setScrollIsBuffering={setScrollIsBuffering}
169165
/>
170166
)}

‎src/components/HVSideNav.tsx

Lines changed: 19 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,26 @@ import aboutIcon from "../img/navIcons/about.png";
55
import blogIcon from "../img/navIcons/blog.png";
66
import { animated, useSpring } from "react-spring";
77
import { useEffect, useState } from "react";
8-
import { ScrollRefs, HueRotation } from "../models/Models";
8+
import { HueRotation } from "../models/Models";
99
import { useLocation, useNavigate } from "react-router-dom";
1010

1111
interface Props {
12-
scrollRefs: ScrollRefs;
1312
hueRotation: HueRotation;
1413
isPortfolio: boolean;
1514
allParams: string[];
16-
scrollToElement: (ref: React.MutableRefObject<any>) => void;
15+
currentNav: string;
16+
setCurrentNav: React.Dispatch<React.SetStateAction<string>>;
1717
setScrollIsBuffering: React.Dispatch<React.SetStateAction<boolean>>;
1818
}
1919

2020
const HVSideNav = ({
2121
isPortfolio,
2222
allParams,
23-
scrollRefs,
2423
hueRotation,
25-
scrollToElement,
24+
currentNav,
25+
setCurrentNav,
2626
setScrollIsBuffering,
2727
}: Props) => {
28-
const [hlNav, setHLNav] = useState("media");
2928
const navigate = useNavigate();
3029
const location = useLocation();
3130
const navSizeChange = useSpring({
@@ -35,26 +34,14 @@ const HVSideNav = ({
3534
reverse: isPortfolio,
3635
});
3736

38-
// const handleNavClick = (
39-
// ref: React.MutableRefObject<any>,
40-
// navName: string
41-
// ) => {
42-
// scrollToElement(ref);
43-
// setHLNav(navName);
44-
// };
45-
46-
const handleNavClick = (
47-
ref: React.MutableRefObject<any>,
48-
navName: string
49-
) => {
50-
navigate(`${location.pathname}#${navName}`);
37+
const navigateToSection = (navName: string) => {
5138
setScrollIsBuffering(true);
52-
setHLNav(navName);
39+
navigate(`${location.pathname}#${navName}`);
40+
setCurrentNav(navName);
5341
};
5442

5543
useEffect(() => {
56-
navigate(`${location.pathname}#media`);
57-
setHLNav("media");
44+
navigateToSection("media");
5845
}, [allParams[1]]);
5946

6047
return (
@@ -63,27 +50,27 @@ const HVSideNav = ({
6350
<ul>
6451
<li>
6552
<animated.img
66-
onClick={() => handleNavClick(scrollRefs.media, "media")}
53+
onClick={() => navigateToSection("media")}
6754
className='nav-icon'
68-
style={hlNav === "media" ? hueRotation : {}}
55+
style={currentNav === "media" ? hueRotation : {}}
6956
src={mediaIcon}
7057
alt='media navigation icon'
7158
/>
7259
</li>
7360
<li>
7461
<animated.img
75-
onClick={() => handleNavClick(scrollRefs.tech, "tech")}
62+
onClick={() => navigateToSection("tech")}
7663
className='nav-icon'
77-
style={hlNav === "tech" ? hueRotation : {}}
64+
style={currentNav === "tech" ? hueRotation : {}}
7865
src={techIcon}
7966
alt='technologies and skills navigation icon'
8067
/>
8168
</li>
8269
<li>
8370
<animated.img
84-
onClick={() => handleNavClick(scrollRefs.about, "about")}
71+
onClick={() => navigateToSection("about")}
8572
className='nav-icon'
86-
style={hlNav === "about" ? hueRotation : {}}
73+
style={currentNav === "about" ? hueRotation : {}}
8774
src={aboutIcon}
8875
alt='about project navigation icon'
8976
/>
@@ -93,18 +80,18 @@ const HVSideNav = ({
9380
<ul>
9481
<li>
9582
<animated.img
96-
onClick={() => handleNavClick(scrollRefs.media, "media")}
83+
onClick={() => navigateToSection("media")}
9784
className='nav-icon'
98-
style={hlNav === "media" ? hueRotation : {}}
85+
style={currentNav === "media" ? hueRotation : {}}
9986
src={mediaIcon}
10087
alt='media navigation icon'
10188
/>
10289
</li>
10390
<li>
10491
<animated.img
105-
onClick={() => handleNavClick(scrollRefs.blog, "blog")}
92+
onClick={() => navigateToSection("blog")}
10693
className='nav-icon'
107-
style={hlNav === "blog" ? hueRotation : {}}
94+
style={currentNav === "blog" ? hueRotation : {}}
10895
src={blogIcon}
10996
alt='media navigation icon'
11097
/>

‎src/components/projects/subComponents/Project.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ li {
1313
width: 100%;
1414
height: 100%;
1515
overflow: scroll;
16+
scroll-snap-type: y proximity;
1617
}
1718

1819
.Project .proj-nav {
@@ -53,13 +54,17 @@ li {
5354
}
5455

5556
.Project .content-section {
57+
/* display */
5658
display: flex;
5759
flex-direction: column;
5860
justify-content: center;
5961
align-items: center;
6062
box-sizing: border-box;
63+
scroll-snap-align: start;
64+
/* sizing */
6165
height: 100%;
6266
width: 100%;
67+
/* style */
6368
border: 1px black dashed;
6469
/* padding-bottom: 35%; */
6570
}

0 commit comments

Comments
 (0)