From 370b0c40209e50f4695423187b2206658dc1ad73 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Thu, 9 Jul 2020 14:30:06 +0530
Subject: [PATCH] - implementing react-scroll

---
 .eslintrc                                   |  1 +
 src/components/builder/left/LeftNavbar.js   |  9 +++--
 src/components/builder/right/RightNavbar.js |  9 +++--
 src/components/shared/SectionIcon.js        | 39 ++++++++++-----------
 4 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 36be0c14..68499025 100644
--- a/.eslintrc
+++ b/.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,
diff --git a/src/components/builder/left/LeftNavbar.js b/src/components/builder/left/LeftNavbar.js
index b9dc2298..7b396fd4 100644
--- a/src/components/builder/left/LeftNavbar.js
+++ b/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>
 
diff --git a/src/components/builder/right/RightNavbar.js b/src/components/builder/right/RightNavbar.js
index b6a07a16..2edbe588 100644
--- a/src/components/builder/right/RightNavbar.js
+++ b/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>
 
diff --git a/src/components/shared/SectionIcon.js b/src/components/shared/SectionIcon.js
index 854db4e3..b51eb0fc 100644
--- a/src/components/shared/SectionIcon.js
+++ b/src/components/shared/SectionIcon.js
@@ -1,31 +1,28 @@
 import { Tooltip } from '@material-ui/core';
-import React, { memo } from 'react';
-import { scroller } from 'react-scroll';
-import { handleKeyUp } from '../../utils';
+import React, { memo, useEffect } from 'react';
+import { Link, scrollSpy } from 'react-scroll';
 
-const SectionIcon = ({ section, containerId, placement = 'right' }) => {
+const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
   const { id, name, icon: Icon } = section;
 
-  const handleClick = () => {
-    scroller.scrollTo(id, {
-      duration: 500,
-      smooth: true,
-      containerId,
-      offset: -10,
-    });
-  };
+  useEffect(() => {
+    scrollSpy.update();
+  }, []);
 
   return (
-    <Tooltip title={name} placement={placement} arrow>
-      <div
-        tabIndex="0"
-        role="button"
-        className="cursor-pointer focus:outline-none"
-        onKeyUp={(e) => handleKeyUp(e, handleClick)}
-        onClick={handleClick}
+    <Tooltip title={name} placement={tooltipPlacement} arrow>
+      <Link
+        spy
+        smooth
+        to={id}
+        offset={-18}
+        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" />
-      </div>
+        <Icon size="16px" />
+      </Link>
     </Tooltip>
   );
 };