images: {
loader: 'imgix',
path: '',
}<link
href='https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap'
rel='stylesheet'
/>const [selected, setSelected] = React.useState<string>(value)
React.useEffect(() => {
if (selected) {
setValue('country', selected, { shouldValidate: true })
}
}, [selected, setValue])const category = [
{
title: 'Kids',
activeMenu: 'kids',
arrLinks: KidsLinks,
dropdownImg: dropdownKidsBg,
},
{
title: 'Women',
activeMenu: 'women',
arrLinks: WomenLinks,
dropdownImg: dropdownWomenBg,
},
{
title: 'Men',
activeMenu: 'men',
arrLinks: MenLinks,
dropdownImg: dropdownMenBg,
},
]
export const Leftbar = () => {
const [isOpen, setIsOpen] = React.useState<string | undefined>()
const onMouseParamEnter = (param: string) => {
setIsOpen(param)
}
const onMouseLeave = () => {
setIsOpen(undefined)
}
return (
<React.Fragment>
<LeftBar>
{category.map((item, inx) => (
<LeftBarItem
key={`dropdown-title${inx}`}
onMouseEnter={() => onMouseParamEnter(item.activeMenu)}
onMouseLeave={onMouseLeave}
isOpen={isOpen === item.activeMenu}
>
<span>{item.title}</span>
<IoIosArrowBack />
</LeftBarItem>
))}
</LeftBar>
{category.map((item, inx) => (
<LeftbarDropdown
key={`dropdown-${inx}`}
activeMenu={isOpen === item.activeMenu}
arrLinks={item.arrLinks}
onMouseEnter={() => onMouseParamEnter(item.activeMenu)}
onMouseLeave={onMouseLeave}
dropdownImg={item.dropdownImg}
/>
))}
</React.Fragment>
)
}
interface LeftbarDropdownProps {
activeMenu: boolean | undefined
arrLinks: Array<HeroLinks>
onMouseLeave: () => void
onMouseEnter: () => void
dropdownImg: string
}
const LeftbarDropdown: React.FC<LeftbarDropdownProps> = ({
activeMenu,
onMouseEnter,
onMouseLeave,
arrLinks,
dropdownImg,
}): ReactElement => {
return (
<CSSTransition in={activeMenu} unmountOnExit timeout={500} classNames='dropdown'>
<DropdownMenu onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} dropdownImg={dropdownImg}>
{arrLinks.map((item, inx) => {
return (
<DropdownMenuLi key={`dropdown-link-${inx}`}>
<DropdownMenuLink to={`${item.path}`}>{item.title}</DropdownMenuLink>
</DropdownMenuLi>
)
})}
</DropdownMenu>
</CSSTransition>
)
}