src/assets/css/components/common/indicator.scss

@@ -9,6 +9,7 @@
 
   .item {
     flex: auto;
+    cursor: pointer;
 
     .dot {
       width: 10px;
@@ -19,10 +20,15 @@
         color: constants.$font-secondary-color;
         style: solid;
       };
+      transition: all .2s;
+    }
+
+    :hover {
+      background-color: constants.$focus-color;
     }
   }
 
   .active > * {
-    background-color: constants.$font-secondary-color;
+    background-color: constants.$font-secondary-color !important;
   }
 }

src/assets/css/constants.scss

@@ -2,3 +2,4 @@ $main-color: #00D4FF;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
+$focus-color: #DDDDDD

src/components/home/index.tsx

@@ -126,6 +126,11 @@ const Home: React.FC = () => {
         }
     }
 
+    const handleIndicatorSwitch = (index: number) => {
+        setCurrentContent(index)
+        handleScrollToContent(index)()
+    }
+
     const content = [
         {
             backgroundColor: '#FBFBFB',
@@ -153,7 +158,11 @@ const Home: React.FC = () => {
             </div>
 
             <div hidden={navbarHidden} className={'indicator'}>
-                <Indicator total={content.length} current={currentContent} />
+                <Indicator
+                    total={content.length}
+                    current={currentContent}
+                    onSwitch={handleIndicatorSwitch}
+                />
             </div>
         </>
     )