✨ feat: Account Navigation

src/components/modules/account/AccountNavigation/AccountNavigation.module.scss

@@ -1,5 +1,17 @@
 @import '../../../../styles/utilities';
 
 .accountNavigation {
-    @apply spacing-horizontal;
+    border-left: 2px solid #FBFBFB;
+
+
+    .slider {
+        @apply inline-block;
+        width: 0.2rem;
+        height: 4.8rem;
+        border-radius: 3px;
+        background-color: var(--primary);
+        position: absolute;
+        left: 11.2rem;
+        transition: all .4s linear;
+    }
 }

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}>
-                <AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
             </div>
-            <div onClick={toggleItem3}>
+            <div ref={item2}>
-                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+                <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>
     )
 }

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss

@@ -1,7 +1,6 @@
 @import '../../../../../styles/utilities';
 
 .accountNavigationItem {
-    @apply bg-gray;
     width: 28rem;
     padding: 1.2rem 0 1.2rem 1.6rem;
     margin-bottom: 1.2rem;
@@ -14,6 +13,6 @@
     &.active {
         background-color: #FBFBFB;
         border-radius: 0 1.6rem 1.6rem 0;
-        border-left: 2px solid var(--primary);
+        // border-left: 2px solid var(--primary);
     }
 }

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}