✨ feat: Account Navigation

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

@@ -0,0 +1,5 @@
+@import '../../../../styles/utilities';
+
+.accountNavigation {
+    @apply spacing-horizontal;
+}

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

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);
+    }
+}

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