Added smooth scroll on nav bar item click.

Author: Ashu1823

client/src/components/Navbar/navbar.tsx

@@ -12,64 +12,58 @@ export function Navbar() {
   const links = [
     {
       title: "Home",
-      icon: (
-        <IconHome className="h-full w-full text-neutral-500 dark:text-neutral-300" />
-      ),
+      icon: <IconHome className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
       to: "#top", // Scroll to top
     },
     {
       title: "Features",
-      icon: (
-        <IconTerminal2 className="h-full w-full text-neutral-500 dark:text-neutral-300" />
-      ),
+      icon: <IconTerminal2 className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
       to: "#features", // Scroll to features section
     },
     {
       title: "FAQs",
-      icon: (
-        <IconNewSection className="h-full w-full text-neutral-500 dark:text-neutral-300" />
-      ),
+      icon: <IconNewSection className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
       to: "#help", // Scroll to help section
     },
     {
       title: "DevHub",
-      icon: (
-        <img
-          src="../../../public/logo.png"
-          width={20}
-          height={20}
-          alt="DevHub"
-        />
-      ),
+      icon: <img src="../../../public/logo.png" width={20} height={20} alt="DevHub" />,
       to: "#", // No scrolling
     },
     {
       title: "DevMap",
-      icon: (
-        <IconExchange className="h-full w-full text-neutral-500 dark:text-neutral-300" />
-      ),
+      icon: <IconExchange className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
       to: "#", // No scrolling
     },
     {
       title: "Discord",
-      icon: (
-        <IconBrandDiscord className="h-full w-full text-neutral-500 dark:text-neutral-300" />
-      ),
+      icon: <IconBrandDiscord className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
       to: "https://discord.gg/he8QHEC8WP", // Discord link
     },
     {
       title: "GitHub",
-      icon: (
-        <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />
-      ),
+      icon: <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
       to: "https://github.com/devhub-ai/devhub", // GitHub link
     },
   ];
 
+  const handleClick = (event, link) => {
+    if (link.to.startsWith("#")) {
+      event.preventDefault();
+      const targetElement = document.querySelector(link.to);
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  };
+
   return (
     <div className="flex items-center justify-center mt-16 w-full">
       <FloatingDock
-        items={links}
+        items={links.map(link => ({
+          ...link,
+          onClick: (event) => handleClick(event, link),
+        }))}
       />
     </div>
   );

client/src/components/ui/floating-dock.tsx

@@ -129,34 +129,48 @@ function IconContainer({
 
     const [hovered, setHovered] = useState(false);
 
+    const handleClick = (event: React.MouseEvent) => {
+        if (to.startsWith("#")) {
+            event.preventDefault();
+            const targetElement = document.querySelector(to);
+            if (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth" });
+            } else {
+                console.error(`Element not found: ${to}`);
+            }
+        } else {
+            // For external links, allow the default behavior
+            window.open(to, "_blank"); // Open in a new tab
+        }
+    };
+
     return (
-        <a href={to}> {/* Change here */}
+        <motion.div
+            ref={ref}
+            style={{ width, height }}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            onClick={handleClick}
+            className="aspect-square rounded-full bg-gray-200 dark:bg-neutral-800 flex items-center justify-center relative cursor-pointer"
+        >
+            <AnimatePresence>
+                {hovered && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 10, x: "-50%" }}
+                        animate={{ opacity: 1, y: 0, x: "-50%" }}
+                        exit={{ opacity: 0, y: 2, x: "-50%" }}
+                        className="px-2 py-0.5 whitespace-pre rounded-md bg-gray-100 border dark:bg-neutral-800 dark:border-neutral-900 dark:text-white border-gray-200 text-neutral-700 absolute left-1/2 -translate-x-1/2 -top-8 w-fit text-xs"
+                    >
+                        {title}
+                    </motion.div>
+                )}
+            </AnimatePresence>
             <motion.div
-                ref={ref}
-                style={{ width, height }}
-                onMouseEnter={() => setHovered(true)}
-                onMouseLeave={() => setHovered(false)}
-                className="aspect-square rounded-full bg-gray-200 dark:bg-neutral-800 flex items-center justify-center relative"
+                style={{ width: widthIcon, height: heightIcon }}
+                className="flex items-center justify-center"
             >
-                <AnimatePresence>
-                    {hovered && (
-                        <motion.div
-                            initial={{ opacity: 0, y: 10, x: "-50%" }}
-                            animate={{ opacity: 1, y: 0, x: "-50%" }}
-                            exit={{ opacity: 0, y: 2, x: "-50%" }}
-                            className="px-2 py-0.5 whitespace-pre rounded-md bg-gray-100 border dark:bg-neutral-800 dark:border-neutral-900 dark:text-white border-gray-200 text-neutral-700 absolute left-1/2 -translate-x-1/2 -top-8 w-fit text-xs"
-                        >
-                            {title}
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-                <motion.div
-                    style={{ width: widthIcon, height: heightIcon }}
-                    className="flex items-center justify-center"
-                >
-                    {icon}
-                </motion.div>
+                {icon}
             </motion.div>
-        </a>
+        </motion.div>
     );
 }