janis/dertyp7.github.io
1
0
Fork 0
mirror of https://github.com/DerTyp7/dertyp7.github.io.git synced 2025-10-29 04:42:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add sections array to App component

Browse Source
This commit is contained in:
dertyp7
2024-01-14 20:03:57 +01:00
parent 976ff50a45
commit d505610b6d
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.tsx
View File

@@ -21,6 +21,7 @@ export default function App() {
const aboutRef = useRef(null); const aboutRef = useRef(null);
const skillsRef = useRef(null); const skillsRef = useRef(null);
const projectsRef = useRef(null); const projectsRef = useRef(null);
const sections = ["", "skills", "projects"];
const prevHash = useRef(window.location.hash); const prevHash = useRef(window.location.hash);
useEffect(() => { useEffect(() => {
@@ -32,18 +33,21 @@ export default function App() {
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
//! WORKAROUND: Prevents the observer from firing when the user scrolls to over a section // console.log("====================================");
//! needs improvement in the future // console.log(`Previous Hash: ${prevHash.current}`);
if ( // console.log(`Current Hash: ${window.location.hash}`);
(prevHash.current === "#projects" && // console.log(`Target ID: ${entry.target.id}`);
window.location.hash === "") ||
(prevHash.current === "#projects" && const difference = Math.abs(
window.location.hash === "#projects") sections.indexOf(prevHash.current.replace("#", "")) -
) { sections.indexOf(window.location.hash.replace("#", ""))
);
// console.log(`Difference: ${difference}`);
if (difference > 1) {
prevHash.current = entry.target.id;
return; return;
} }
prevHash.current = window.location.hash; prevHash.current = entry.target.id;
//! WORKAROUND END
window.location.hash = entry.target.id; window.location.hash = entry.target.id;
entry.target.classList.add("active"); entry.target.classList.add("active");
@@ -98,11 +102,7 @@ export default function App() {
<Footer /> <Footer />
{isMobileDevice() ? ( {isMobileDevice() ? <JumpToTop /> : <SectionScroll sections={sections} />}
<JumpToTop />
) : (
<SectionScroll sections={["", "skills", "projects"]} />
)}
</div> </div>
); );
} }