crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 04:14:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Account Navigation

Browse Source
This commit is contained in:
sonnguyenkieio 2021-09-07 10:25:09 +07:00
parent bac30213c8
commit a2d2b45de3
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
View File

@ -12,6 +12,6 @@
background-color: var(--primary); background-color: var(--primary);
position: absolute; position: absolute;
left: 11.2rem; left: 11.2rem;
transition: all .4s linear; transition: all .2s linear;
} }
} }

27
src/components/modules/account/AccountNavigation/AccountNavigation.tsx
View File

@ -4,10 +4,12 @@ import s from './AccountNavigation.module.scss'
import AccountNavigationItem from './components/AccountNavigationItem' import AccountNavigationItem from './components/AccountNavigationItem'
interface AccountNavigationProps { interface AccountNavigationProps {
setAccountActive: ()=>void;
setOrderActive: ()=>void;
setFavActive: ()=>void;
} }
const AccountNavigation = ({ } : AccountNavigationProps) => { const AccountNavigation = ({ setAccountActive, setOrderActive, setFavActive } : AccountNavigationProps) => {
const active = "active", unActive = ""; const active = "active", unActive = "";
const [item1Active, setItem1Active] = useState(unActive); const [item1Active, setItem1Active] = useState(unActive);
@ -25,24 +27,27 @@ const AccountNavigation = ({ } : AccountNavigationProps) => {
} }
function toggleItem1():void { function toggleItem1():void {
setItem1Active(active) setItem1Active(active);
setAccountActive();
setItem2Active(unActive) setItem2Active(unActive);
setItem3Active(unActive) setItem3Active(unActive);
slide(item1); slide(item1);
} }
function toggleItem2():void { function toggleItem2():void {
setItem2Active(active) setItem2Active(active);
setOrderActive();
setItem1Active(unActive) setItem1Active(unActive);
setItem3Active(unActive) setItem3Active(unActive);
slide(item2); slide(item2);
} }
function toggleItem3():void { function toggleItem3():void {
setItem3Active(active) setItem3Active(active);
setFavActive();
setItem1Active(unActive) setItem1Active(unActive);
setItem2Active(unActive) setItem2Active(unActive);
slide(item3); slide(item3);
} }