From 36deb17facc1d917657b25f12b03609efbd98147 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Wed, 1 Sep 2021 09:03:54 +0700
Subject: [PATCH] :sparkles: feat: Account Navigation

---
 .../AccountNavigation.module.scss             |  5 ++
 .../AccountNavigation/AccountNavigation.tsx   | 50 +++++++++++++++++++
 .../AccountNavigationItem.module.scss         | 19 +++++++
 .../components/AccountNavigationItem.tsx      | 21 ++++++++
 4 files changed, 95 insertions(+)
 create mode 100644 src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
 create mode 100644 src/components/modules/account/AccountNavigation/AccountNavigation.tsx
 create mode 100644 src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
 create mode 100644 src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx

diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
new file mode 100644
index 000000000..22c885238
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
@@ -0,0 +1,5 @@
+@import '../../../../styles/utilities';
+
+.accountNavigation {
+    @apply spacing-horizontal;
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
new file mode 100644
index 000000000..fd289edc9
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react"
+import s from './AccountNavigation.module.scss'
+
+import AccountNavigationItem from './components/AccountNavigationItem' 
+
+interface AccountNavigationProps {
+    
+}
+
+const AccountNavigation = ({  } : AccountNavigationProps) => {
+    const active = "active", unActive = "";
+
+    const [item1Active, setItem1Active] = useState(active);
+    const [item2Active, setItem2Active] = useState(unActive);
+    const [item3Active, setItem3Active] = useState(unActive);
+
+    function toggleItem1():void {
+        setItem1Active(active)
+
+        setItem2Active(unActive)
+        setItem3Active(unActive)
+    }
+    function toggleItem2():void {
+        setItem2Active(active)
+
+        setItem1Active(unActive)
+        setItem3Active(unActive)
+    }
+    function toggleItem3():void {
+        setItem3Active(active)
+
+        setItem1Active(unActive)
+        setItem2Active(unActive)
+    }
+    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>
+            <div onClick={toggleItem3}>
+                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+            </div>
+        </section>
+    )
+}
+
+export default AccountNavigation
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
new file mode 100644
index 000000000..01fc0e1cc
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
@@ -0,0 +1,19 @@
+@import '../../../../../styles/utilities';
+
+.accountNavigationItem {
+    @apply bg-gray;
+    width: 28rem;
+    padding: 1.2rem 0 1.2rem 1.6rem;
+    margin-bottom: 1.2rem;
+
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+
+    &.active {
+        background-color: #FBFBFB;
+        border-radius: 0 1.6rem 1.6rem 0;
+        border-left: 2px solid var(--primary);
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
new file mode 100644
index 000000000..47cd537f0
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import classNames from "classnames";
+import s from './AccountNavigationItem.module.scss'
+
+interface AccountNavigationItemProps {
+    children?: string;
+    active?: string;
+    target?: string;
+}
+
+const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => {
+    return (
+        <div className={classNames(s.accountNavigationItem, {
+            [s[active]]:active
+        })}>
+            {children}
+        </div>
+    )
+}
+
+export default AccountNavigationItem
\ No newline at end of file