✨ feat: Account Navigation

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useRef, RefObject, useEffect } from "react"
 import s from './AccountNavigation.module.scss'
 
 import AccountNavigationItem from './components/AccountNavigationItem' 
@@ -10,39 +10,58 @@ interface AccountNavigationProps {
 const AccountNavigation = ({  } : AccountNavigationProps) => {
     const active = "active", unActive = "";
 
-    const [item1Active, setItem1Active] = useState(active);
-    const [item2Active, setItem2Active] = useState(unActive);
+    const [item1Active, setItem1Active] = useState(unActive);
+    const [item2Active, setItem2Active] = useState(active);
     const [item3Active, setItem3Active] = useState(unActive);
 
+    const item1 = useRef<HTMLDivElement>(null);
+    const item2 = useRef<HTMLDivElement>(null);
+    const item3 = useRef<HTMLDivElement>(null);
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLDivElement>) {        
+        const top = ref.current.offsetTop;
+        slider.current.style.top = top.toString()+"px";      
+    }
+
     function toggleItem1():void {
         setItem1Active(active)
 
         setItem2Active(unActive)
         setItem3Active(unActive)
+        slide(item1);
     }
     function toggleItem2():void {
         setItem2Active(active)
 
         setItem1Active(unActive)
         setItem3Active(unActive)
+        slide(item2);
     }
     function toggleItem3():void {
         setItem3Active(active)
 
         setItem1Active(unActive)
         setItem2Active(unActive)
+        slide(item3);
     }
+
+    useEffect(() => {
+        slide(item2);
+    }, [])
+
     return (
         <section className={s.accountNavigation}>
-            <div onClick={toggleItem1}>
-                <AccountNavigationItem active={item1Active}>Customer Information</AccountNavigationItem>
-                </div>
-            <div onClick={toggleItem2}>
-                <AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
+            <div ref={item1}>
+                <AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
             </div>
-            <div onClick={toggleItem3}>
-                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+            <div ref={item2}>
+                <AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
             </div>
+            <div ref={item3}>
+                <AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
+            </div>
+            <div ref={slider} className={s.slider}></div>
         </section>
     )
 }