✨ 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 [item1Active, setItem1Active] = useState(unActive);
-    const [item2Active, setItem2Active] = 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}>
+            <div ref={item1}>
-                <AccountNavigationItem active={item1Active}>Customer Information</AccountNavigationItem>
+                <AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
             </div>
-            <div onClick={toggleItem2}>
+            <div ref={item2}>
-                <AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
+                <AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
             </div>
-            <div onClick={toggleItem3}>
+            <div ref={item3}>
-                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+                <AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
             </div>
+            <div ref={slider} className={s.slider}></div>
         </section>
     )
 }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import classNames from "classnames";
 import s from './AccountNavigationItem.module.scss'
 
@@ -6,11 +6,12 @@ interface AccountNavigationItemProps {
     children?: string;
     active?: string;
     target?: string;
+    onClick: () => void;
 }
 
-const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => {
+const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
     return (
-        <div className={classNames(s.accountNavigationItem, {
+        <div onClick={onClick} className={classNames(s.accountNavigationItem, {
             [s[active]]:active
         })}>
             {children}