151 lines
8.6 KiB
TypeScript
151 lines
8.6 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import banquiseServer from '../../assets/banquise_server.svg';
|
|
import { URLS, SITE_CONFIG } from '../../shared/constants';
|
|
import type { IMobileMenuProps } from '../../shared/types';
|
|
import { COMPONENTS, GRADIENTS, TYPOGRAPHY } from '../../styles/design-system';
|
|
|
|
export const MobileMenu: React.FC<IMobileMenuProps> = ({ isOpen, onClose }) => {
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
|
|
return () => {
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<div className={`md:hidden fixed inset-0 z-[100] transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
|
|
{/* Overlay */}
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-br from-black/70 via-banquise-blue-dark/50 to-black/70 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Menu mobile */}
|
|
<div className={`absolute top-0 right-0 h-full w-72 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/98 to-banquise-blue-dark/95 backdrop-blur-2xl shadow-2xl transition-transform duration-300 border-l border-banquise-blue-lightest/20 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 sm:p-6 pt-6 sm:pt-8 border-b border-banquise-blue-lightest/20 bg-gradient-to-r from-banquise-blue-dark/50 to-transparent">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-banquise-blue-light/20 rounded-full blur-md"></div>
|
|
<img
|
|
src={banquiseServer}
|
|
alt="Logo"
|
|
className="h-8 sm:h-10 w-auto relative z-10"
|
|
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.6))' }}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<span className={`text-base sm:text-lg font-bold ${TYPOGRAPHY.special.lightHeading}`}>
|
|
{SITE_CONFIG.name}
|
|
</span>
|
|
<p className="text-banquise-blue-lightest/70 text-xs">Menu Navigation</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="group relative p-3 bg-white/10 hover:bg-white/20 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
|
|
onClick={onClose}
|
|
aria-label="Fermer"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-white">
|
|
<path d="M15 5L5 15M5 5L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex flex-col justify-start px-6 py-8 space-y-6 overflow-y-auto" style={{ height: 'calc(100vh - 120px)' }}>
|
|
|
|
{/* Navigation Links */}
|
|
<div className="space-y-3">
|
|
<a href="#services" className={COMPONENTS.navigation.mobileItem} onClick={onClose}>
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`${COMPONENTS.icons.small} ${GRADIENTS.primary} group-hover:scale-110 transition-transform duration-200`}>
|
|
<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="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>
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-lg">Nos Services</span>
|
|
<p className="text-white/60 text-sm">Découvrir notre offre</p>
|
|
</div>
|
|
</div>
|
|
<svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="#about" className={COMPONENTS.navigation.mobileItem} onClick={onClose}>
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`${COMPONENTS.icons.small} ${GRADIENTS.primary} group-hover:scale-110 transition-transform duration-200`}>
|
|
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-lg">À propos</span>
|
|
<p className="text-white/60 text-sm">En savoir plus sur nous</p>
|
|
</div>
|
|
</div>
|
|
<svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
|
|
<a href={URLS.social.discord} className={COMPONENTS.navigation.mobileItem} onClick={onClose}>
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`${COMPONENTS.icons.small} ${GRADIENTS.discord} group-hover:scale-110 transition-transform duration-200`}>
|
|
<svg className="w-5 h-5 text-white" 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>
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-lg">Discord</span>
|
|
<p className="text-white/60 text-sm">Rejoindre la communauté</p>
|
|
</div>
|
|
</div>
|
|
<svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="pt-6 border-t border-banquise-blue-lightest/20">
|
|
<a
|
|
href={URLS.services.auth}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`w-full ${COMPONENTS.buttons.base} ${GRADIENTS.primary} py-4 px-6 text-lg shadow-xl border border-banquise-blue-lightest/20`}
|
|
onClick={onClose}
|
|
>
|
|
<svg className="w-6 h-6 mr-3" 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>
|
|
Se connecter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="absolute bottom-6 left-6 right-6">
|
|
<div className="text-center py-4 border-t border-banquise-blue-lightest/20">
|
|
<p className="text-white/50 text-sm">
|
|
© 2024 {SITE_CONFIG.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Effet glassmorphism */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/20 pointer-events-none"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|