50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { mergeClasses as cn } from '../../../styles/designSystem';
|
|
|
|
interface MobileMenuButtonProps {
|
|
isOpen: boolean;
|
|
onClick: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({
|
|
isOpen,
|
|
onClick,
|
|
className
|
|
}) => {
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'md:hidden relative p-3 rounded-xl transition-all duration-300 group',
|
|
'bg-white/10 hover:bg-white/20 active:bg-white/25',
|
|
'border border-white/20 hover:border-white/30',
|
|
'hover:scale-105 active:scale-95',
|
|
'focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50',
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
aria-label={isOpen ? "Fermer le menu" : "Ouvrir le menu"}
|
|
aria-expanded={isOpen}
|
|
>
|
|
{/* Hamburger Icon avec animation moderne */}
|
|
<div className="w-6 h-6 relative flex flex-col justify-center items-center">
|
|
<span className={cn(
|
|
'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform',
|
|
isOpen ? 'rotate-45 translate-y-0' : '-translate-y-2'
|
|
)} />
|
|
<span className={cn(
|
|
'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out',
|
|
isOpen ? 'opacity-0 scale-0' : 'opacity-100 scale-100'
|
|
)} />
|
|
<span className={cn(
|
|
'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform',
|
|
isOpen ? '-rotate-45 translate-y-0' : 'translate-y-2'
|
|
)} />
|
|
</div>
|
|
|
|
{/* Subtle glow effect on hover */}
|
|
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</button>
|
|
);
|
|
};
|