268 lines
10 KiB
TypeScript
268 lines
10 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Button } from '@/components/common/Button';
|
|
import { mergeClasses as cn } from '@/lib/styles/designSystem';
|
|
import { Logo } from './navbar/Logo';
|
|
import { URLS } from '@/lib/config/constants';
|
|
import type { Translation } from '@/types/i18n';
|
|
|
|
interface MobileMenuProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
translations: Translation['navigation'];
|
|
}
|
|
|
|
interface MobileNavItemProps {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
href: string;
|
|
isExternal?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const MobileNavItem: React.FC<MobileNavItemProps> = ({
|
|
icon,
|
|
title,
|
|
description,
|
|
href,
|
|
isExternal = false,
|
|
onClick
|
|
}) => {
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
if (onClick) {
|
|
e.preventDefault();
|
|
onClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
onClick={handleClick}
|
|
className={cn(
|
|
'group flex items-center justify-between p-4 rounded-xl transition-all duration-300',
|
|
'bg-white/5 hover:bg-white/10 active:bg-white/15',
|
|
'border border-white/10 hover:border-white/20',
|
|
'hover:scale-[1.02] active:scale-[0.98]',
|
|
'hover:shadow-lg hover:shadow-banquise-blue/20'
|
|
)}
|
|
target={isExternal ? '_blank' : undefined}
|
|
rel={isExternal ? 'noopener noreferrer' : undefined}
|
|
>
|
|
<div className="flex items-center space-x-4">
|
|
<div className={cn(
|
|
'flex items-center justify-center w-10 h-10 rounded-xl',
|
|
'bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20',
|
|
'border border-banquise-blue-lightest/20',
|
|
'group-hover:scale-110 transition-transform duration-300'
|
|
)}>
|
|
{icon}
|
|
</div>
|
|
<div className="flex-1">
|
|
<span className="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">
|
|
{title}
|
|
</span>
|
|
<p className="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Arrow Icon */}
|
|
<div className={cn(
|
|
'flex items-center justify-center w-6 h-6 rounded-full',
|
|
'text-white/40 group-hover:text-white/80 transition-all duration-300',
|
|
'group-hover:translate-x-1'
|
|
)}>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, translations }) => {
|
|
// Gérer le scroll du body
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
|
|
return () => {
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [isOpen]);
|
|
|
|
const handleNavClick = (sectionId: string) => {
|
|
if (sectionId === 'home') {
|
|
// Scroll to top for home section
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
} else if (sectionId === 'contact') {
|
|
// Open email client for contact
|
|
window.location.href = 'mailto:contact@la-banquise.fr';
|
|
} else {
|
|
// Scroll to specific section
|
|
const element = document.getElementById(sectionId);
|
|
if (element) {
|
|
element.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div className={cn(
|
|
'md:hidden fixed inset-0 z-[100] transition-all duration-300',
|
|
isOpen ? 'visible' : 'invisible'
|
|
)}>
|
|
{/* Overlay avec effet de blur moderne */}
|
|
<div
|
|
className={cn(
|
|
'absolute inset-0 transition-all duration-300',
|
|
'bg-gradient-to-br from-black/80 via-banquise-blue-dark/60 to-black/80',
|
|
'backdrop-blur-lg',
|
|
isOpen ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Menu Panel */}
|
|
<div className={cn(
|
|
'absolute top-0 right-0 h-full w-80 max-w-[90vw]',
|
|
'bg-gradient-to-b from-banquise-blue-dark/98 via-banquise-blue-dark/95 to-banquise-blue-dark/90',
|
|
'backdrop-blur-2xl shadow-2xl',
|
|
'border-l border-banquise-blue-lightest/20',
|
|
'transition-transform duration-300 ease-out',
|
|
isOpen ? 'translate-x-0' : 'translate-x-full'
|
|
)}>
|
|
|
|
{/* Header avec Logo */}
|
|
<div className="flex items-center justify-between p-6 pt-8 border-b border-banquise-blue-lightest/20">
|
|
<Logo scrolled={false} />
|
|
|
|
<button
|
|
className={cn(
|
|
'group relative p-3 rounded-xl transition-all duration-300',
|
|
'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'
|
|
)}
|
|
onClick={onClose}
|
|
aria-label="Fermer le menu"
|
|
>
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation Items */}
|
|
<div className="flex flex-col h-full overflow-y-auto p-6 space-y-4">
|
|
|
|
{/* Section Navigation */}
|
|
<div className="space-y-3">
|
|
<MobileNavItem
|
|
icon={
|
|
<svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
}
|
|
title={translations.home}
|
|
description="Retour à l'accueil"
|
|
href="#home"
|
|
onClick={() => handleNavClick('home')}
|
|
/>
|
|
|
|
<MobileNavItem
|
|
icon={
|
|
<svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
}
|
|
title={translations.services}
|
|
description="Découvrir notre offre"
|
|
href="#services"
|
|
onClick={() => handleNavClick('services')}
|
|
/>
|
|
|
|
<MobileNavItem
|
|
icon={
|
|
<svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
}
|
|
title={translations.about}
|
|
description="En savoir plus sur nous"
|
|
href="#about"
|
|
onClick={() => handleNavClick('about')}
|
|
/>
|
|
|
|
<MobileNavItem
|
|
icon={
|
|
<svg className="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
}
|
|
title={translations.contact}
|
|
description="Nous envoyer un email"
|
|
href="mailto:contact@la-banquise.fr"
|
|
onClick={() => handleNavClick('contact')}
|
|
/>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="border-t border-banquise-blue-lightest/20 my-6" />
|
|
|
|
{/* Social & External Links */}
|
|
<div className="space-y-3">
|
|
<MobileNavItem
|
|
icon={
|
|
<svg className="w-5 h-5 text-[#5865F2]" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
|
</svg>
|
|
}
|
|
title="Discord"
|
|
description="Rejoindre la communauté"
|
|
href={URLS.social.discord}
|
|
isExternal={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="mt-8 pb-6">
|
|
<Button
|
|
variant="primary"
|
|
size="lg"
|
|
leftIcon={
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
}
|
|
onClick={() => {
|
|
window.open(URLS.services.auth, '_blank');
|
|
onClose();
|
|
}}
|
|
className="w-full shadow-xl"
|
|
>
|
|
Se connecter
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Effet de gradient overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/10 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|