fix: issue asyncapi#2181 Links in tools section to specific category do not work

Author: aryanas159

components/tools/ToolDashboard.js

@@ -48,6 +48,17 @@ export default function ToolDashboard() {
     }, 1000);
   }, []);
 
+  // useEffect to scroll particular div into view
+  useEffect(() => {
+    setTimeout(() => {
+      const path = router.asPath
+      const id = path.slice(path.indexOf("#") + 1).replace("%20", " ")
+      const element = document.getElementById(id)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: "nearest", inline: "nearest" })
+      }
+    }, 1000)
+  }, [])
   // useEffect function to enable the close Category dropdown Modal feature when clicked outside of the modal
   useEffect(() => {
     const checkIfClickOutside = (e) => {

components/tools/ToolsList.js

@@ -6,7 +6,7 @@ export default function toolsList({ toolsData }) {
     <div className="" data-testid="ToolsList-main" >
       {Object.keys(toolsData).map((categoryName, index) => {
         if(toolsData[categoryName].toolsList.length > 0) return (
-        <div className='my-8' key={index} id={categoryName}>
+        <div className='my-8' key={index} id={categoryName} style={{scrollMargin: "100px"}}>
           <Heading typeStyle='heading-md-semibold' className='my-2' >
             {categoryName}
           </Heading>