From d940e3e1b46c9692c5f1c80d49f959cbc394a8ba Mon Sep 17 00:00:00 2001
From: Harris Greenstein <harrisgreenstein@gmail.com>
Date: Thu, 14 Dec 2023 01:47:10 -0500
Subject: [PATCH] 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

---
 client/src/components/NavigationBar.jsx |  1 -
 client/src/handleNavigation.js          | 37 +++++++++++++++++--------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/client/src/components/NavigationBar.jsx b/client/src/components/NavigationBar.jsx
index cb2be63..e764b14 100644
--- 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
index 7bc01a0..a3d386d 100644
--- 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;
+