From a2d2b45de31035e14c4ba5586339b71852f4ead9 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Tue, 7 Sep 2021 10:25:09 +0700
Subject: [PATCH] :sparkles: feat: Account Navigation

---
 .../AccountNavigation.module.scss             |  2 +-
 .../AccountNavigation/AccountNavigation.tsx   | 27 +++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
index 1dbcbf408..a4a93afa2 100644
--- a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
@@ -12,6 +12,6 @@
         background-color: var(--primary);
         position: absolute;
         left: 11.2rem;
-        transition: all .4s linear;
+        transition: all .2s linear;
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
index 15ecd3a31..928ab3a5e 100644
--- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
@@ -4,10 +4,12 @@ import s from './AccountNavigation.module.scss'
 import AccountNavigationItem from './components/AccountNavigationItem' 
 
 interface AccountNavigationProps {
-    
+    setAccountActive: ()=>void;
+    setOrderActive: ()=>void;
+    setFavActive: ()=>void;
 }
 
-const AccountNavigation = ({  } : AccountNavigationProps) => {
+const AccountNavigation = ({ setAccountActive, setOrderActive, setFavActive } : AccountNavigationProps) => {
     const active = "active", unActive = "";
 
     const [item1Active, setItem1Active] = useState(unActive);
@@ -25,24 +27,27 @@ const AccountNavigation = ({  } : AccountNavigationProps) => {
     }
 
     function toggleItem1():void {
-        setItem1Active(active)
+        setItem1Active(active);
+        setAccountActive();
 
-        setItem2Active(unActive)
-        setItem3Active(unActive)
+        setItem2Active(unActive);
+        setItem3Active(unActive);
         slide(item1);
     }
     function toggleItem2():void {
-        setItem2Active(active)
+        setItem2Active(active);
+        setOrderActive();
 
-        setItem1Active(unActive)
-        setItem3Active(unActive)
+        setItem1Active(unActive);
+        setItem3Active(unActive);
         slide(item2);
     }
     function toggleItem3():void {
-        setItem3Active(active)
+        setItem3Active(active);
+        setFavActive();
 
-        setItem1Active(unActive)
-        setItem2Active(unActive)
+        setItem1Active(unActive);
+        setItem2Active(unActive);
         slide(item3);
     }