refactor(navigation): implements smooth scroll

lazarusmugo · Jul 25, 2024 · 3c881d6 · 3c881d6
1 parent f6413cd
commit 3c881d6
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/src/components/navigation/NavigationBar.jsx b/src/components/navigation/NavigationBar.jsx
@@ -23,7 +23,6 @@ const sectionStyles = {
     textColor: "text-custom-blue",
     nameColor: "text-custom-blue",
   },
-
   "contact-me": {
     backgroundColor: "bg-contact-me-bg",
     textColor: "text-custom-blue",
@@ -70,7 +69,7 @@ export const NavigationBar = () => {
       setDynamicStyles({
         backgroundColor: "bg-white",
         textColor: "text-custom-blue",
-      nameColor: "text-custom-blue",
+        nameColor: "text-custom-blue",
       });
     } else {
       if (currentSection) {
@@ -101,17 +100,28 @@ export const NavigationBar = () => {
 
   const { backgroundColor, textColor, nameColor } = dynamicStyles;
 
+  const handleScrollToSection = (sectionId, e) => {
+    e.preventDefault(); // Prevent default anchor behavior
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth", block: "start" });
+      if (window.innerWidth < 768) {
+        setOpen(false);
+      }
+    }
+  };
+
   return (
     <div
-      className={`fixed w-full flex justify-between items-center p-3 lg:p-6  z-10 ${backgroundColor} ${textColor}`}
+      className={`fixed w-full flex justify-between items-center p-3 lg:p-6 z-10 ${backgroundColor} ${textColor}`}
     >
-      <span className={`font-bold text-xl  lg:text-3xl ${nameColor}` }>
+      <span className={`font-bold text-xl lg:text-3xl ${nameColor}`}>
         Lazarus Mugo
       </span>
-      <div className={`lg:${textColor}  flex lg:hidden`}>
+      <div className={`lg:${textColor} flex lg:hidden`}>
         <Hamburger toggled={isOpen} size={30} toggle={setOpen} />
       </div>
-      <div className={`${textColor} lg:mx-[3%]  hidden lg:flex`}>
+      <div className={`${textColor} lg:mx-[3%] hidden lg:flex`}>
         <Hamburger toggled={isOpen} size={60} toggle={setOpen} />
       </div>
       <AnimatePresence>
@@ -121,14 +131,14 @@ export const NavigationBar = () => {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.4 }}
-            className="fixed  left-0 right-0 top-[4.5rem] lg:left-[80%] lg:right-[5%] p-5 pt-0 bg-white max-h-screen  text-custom-blue max-w-screen-sm"
+            className="fixed left-0 right-0 top-[4.5rem] lg:left-[80%] lg:right-[5%] p-5 pt-0 bg-white max-h-screen text-custom-blue max-w-screen-sm"
           >
             <ul className="grid gap-0">
               {Object.keys(sectionStyles).map((sectionId) => (
                 <li key={sectionId}>
                   <a
                     href={`#${sectionId}`}
-                    onClick={() => setOpen(false)}
+                    onClick={(e) => handleScrollToSection(sectionId, e)}
                     className="block p-3 rounded-xl bg-white"
                   >
                     {sectionId.charAt(0).toUpperCase() +