- implementing react-scroll

.eslintrc

@@ -13,6 +13,7 @@
     "react/jsx-props-no-spreading": 0,
     "prettier/prettier": ["error"],
     "react/no-array-index-key": 0,
+    "jsx-a11y/anchor-is-valid": 0,
     "react/button-has-type": 0,
     "no-unused-expressions": 0,
     "no-restricted-syntax": 0,

src/components/builder/left/LeftNavbar.js

@@ -14,9 +14,14 @@ const LeftNavbar = () => (
 
     <hr className="my-6" />
 
-    <div className="grid grid-cols-1 gap-8">
+    <div className="grid grid-cols-1 gap-5 text-secondary-dark">
       {sections.map((x) => (
-        <SectionIcon key={x.id} section={x} containerId="LeftSidebar" />
+        <SectionIcon
+          key={x.id}
+          section={x}
+          containerId="LeftSidebar"
+          tooltipPlacement="right"
+        />
       ))}
     </div>
 

src/components/builder/right/RightNavbar.js

@@ -7,9 +7,14 @@ import SyncIndicator from './SyncIndicator';
 const RightNavbar = () => {
   return (
     <div className={styles.container}>
-      <div className="grid grid-cols-1 gap-8">
+      <div className="grid grid-cols-1 gap-6 text-secondary-dark">
         {sections.map((x) => (
-          <SectionIcon key={x.id} section={x} containerId="RightSidebar" />
+          <SectionIcon
+            key={x.id}
+            section={x}
+            containerId="RightSidebar"
+            tooltipPlacement="left"
+          />
         ))}
       </div>
 

src/components/shared/SectionIcon.js

@@ -1,31 +1,28 @@
 import { Tooltip } from '@material-ui/core';
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
-import { scroller } from 'react-scroll';
+import { Link, scrollSpy } from 'react-scroll';
-import { handleKeyUp } from '../../utils';
 
-const SectionIcon = ({ section, containerId, placement = 'right' }) => {
+const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
   const { id, name, icon: Icon } = section;
 
-  const handleClick = () => {
+  useEffect(() => {
-    scroller.scrollTo(id, {
+    scrollSpy.update();
-      duration: 500,
+  }, []);
-      smooth: true,
-      containerId,
-      offset: -10,
-    });
-  };
 
   return (
-    <Tooltip title={name} placement={placement} arrow>
+    <Tooltip title={name} placement={tooltipPlacement} arrow>
-      <div
+      <Link
-        tabIndex="0"
+        spy
-        role="button"
+        smooth
-        className="cursor-pointer focus:outline-none"
+        to={id}
-        onKeyUp={(e) => handleKeyUp(e, handleClick)}
+        offset={-18}
-        onClick={handleClick}
+        duration={500}
+        containerId={containerId}
+        activeClass="text-primary"
+        className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary"
       >
-        <Icon className="text-secondary-dark hover:text-primary" size="16px" />
+        <Icon size="16px" />
-      </div>
+      </Link>
     </Tooltip>
   );
 };