Changed handleNavigation to handle multiple paths

-Now allows you to go from blog to specific section on the home page -Adds #section to url to direct the scrolling
hgreenstein · Dec 14, 2023 · d940e3e · d940e3e
1 parent 1911a5a
commit d940e3e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/client/src/components/NavigationBar.jsx b/client/src/components/NavigationBar.jsx
@@ -109,7 +109,6 @@ function NavigationBar({ darkMode, setDarkMode }) {
                                 </Nav.Link>
                                  <Nav.Link
                                     href="/blog"
-                                    onClick={HandleNavigation}
                                     className={
                                         darkMode
                                             ? 'navbar-collapse-item-dark text-light'

diff --git a/client/src/handleNavigation.js b/client/src/handleNavigation.js
@@ -1,24 +1,29 @@
 const handleNavigation = (e, alignToTop = true) => {
     e.preventDefault();
     const targetId = e.target.getAttribute('href').slice(1);
+    const currentPath = window.location.pathname;
+
+    if (currentPath !== '/') {
+        // Update the URL with the hash of the target section
+        window.location.href = '/#' + targetId;
+    } else {
+        // If already on the root, update only the hash
+        window.location.hash = targetId;
+        // Scroll immediately to the target section
+        scrollToTarget(targetId, alignToTop);
+    }
+};
+
+const scrollToTarget = (targetId, alignToTop) => {
     const targetSection = document.getElementById(targetId);
 
     if (targetSection) {
-        // Get the top position of the target section
-        const targetOffset =
-            targetSection.getBoundingClientRect().top + window.scrollY;
-
-        // Select the navbar element and get its current height
+        const targetOffset = targetSection.getBoundingClientRect().top + window.scrollY;
         const navbar = document.querySelector('.navbar');
-
         const navbarHeight = navbar.offsetHeight;
-
-        // Adjust the offset position by deducting the navbar's height
         const offsetPosition = alignToTop
             ? targetOffset - navbarHeight
-            : targetOffset -
-              window.innerHeight / 2 +
-              targetSection.offsetHeight / 2;
+            : targetOffset - window.innerHeight / 2 + targetSection.offsetHeight / 2;
 
         window.scrollTo({
             top: offsetPosition,
@@ -27,4 +32,14 @@ const handleNavigation = (e, alignToTop = true) => {
     }
 };
 
+// Global function to handle scrolling on page load
+window.onload = () => {
+    const hash = window.location.hash.slice(1);
+    document.querySelector('.ring').style.display = 'none';
+    if (hash) {
+        scrollToTarget(hash, true);
+    }
+};
+
 export default handleNavigation;
+