42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
type MenuBurgerButtonProps = {
|
|
state: boolean;
|
|
onStateChange?: (value: boolean) => void;
|
|
};
|
|
|
|
export const MenuBurgerButton = ({
|
|
state,
|
|
onStateChange,
|
|
}: MenuBurgerButtonProps) => {
|
|
state = state ?? false;
|
|
|
|
// This function is called when the button is clicked
|
|
const handleClick = () => {
|
|
if (onStateChange) onStateChange(!state);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className='flex flex-col md:hidden w-10 h-10 justify-center items-center cursor-pointer relative'
|
|
onClick={handleClick}
|
|
>
|
|
<span
|
|
className={`w-8 h-[4px] bg-primary rounded transition-all duration-200 ${
|
|
state ? 'opacity-0' : 'opacity-100'
|
|
}`}
|
|
/>
|
|
<span
|
|
className={`absolute w-8 h-[4px] bg-primary rounded transition-all duration-200 ${
|
|
state ? 'rotate-45' : '-translate-y-[10px]'
|
|
}`}
|
|
/>
|
|
<span
|
|
className={`absolute w-8 h-[4px] bg-primary rounded transition-all duration-200 ${
|
|
state ? '-rotate-45' : 'translate-y-[10px]'
|
|
}`}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|