121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { useScrollEffects } from '../../hooks/useScrollEffects';
|
|
import { mergeClasses as cn } from '../../styles/designSystem';
|
|
import { Logo } from './navbar/Logo';
|
|
import { NavLinks } from './navbar/NavLinks';
|
|
import { ActionButtons } from './navbar/ActionButtons';
|
|
import { MobileMenuButton } from './navbar/MobileMenuButton';
|
|
import { MobileMenu } from './MobileMenu';
|
|
import type { Translation } from '../../types/i18n';
|
|
|
|
interface ModernNavigationProps {
|
|
translations: Translation['navigation'];
|
|
languageSwitcher: React.ReactElement;
|
|
}
|
|
|
|
export const ModernNavigation: React.FC<ModernNavigationProps> = ({
|
|
translations,
|
|
languageSwitcher
|
|
}) => {
|
|
const { scrolled } = useScrollEffects();
|
|
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
|
|
|
|
// Fermer le menu mobile lors du redimensionnement
|
|
React.useEffect(() => {
|
|
const handleResize = () => {
|
|
if (window.innerWidth >= 768) {
|
|
setMobileMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
// Empêcher le scroll du body quand le menu mobile est ouvert
|
|
React.useEffect(() => {
|
|
if (mobileMenuOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
|
|
return () => {
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [mobileMenuOpen]);
|
|
|
|
return (
|
|
<>
|
|
{/* Navigation Bar */}
|
|
<nav
|
|
className={cn(
|
|
'fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-out',
|
|
// Background adaptatif selon le scroll
|
|
scrolled
|
|
? 'bg-banquise-blue-dark/95 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30'
|
|
: 'bg-banquise-blue-dark/90 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20',
|
|
// Animation de hauteur
|
|
'will-change-auto'
|
|
)}
|
|
>
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className={cn(
|
|
'flex justify-between items-center px-4 sm:px-6 lg:px-8 transition-all duration-300',
|
|
scrolled ? 'h-16' : 'h-18 lg:h-20'
|
|
)}>
|
|
|
|
{/* Logo Section */}
|
|
<Logo scrolled={scrolled} />
|
|
|
|
{/* Navigation Links (Desktop) */}
|
|
<NavLinks
|
|
translations={translations}
|
|
scrolled={scrolled}
|
|
className="flex-1 justify-center ml-8"
|
|
/>
|
|
|
|
{/* Action Buttons (Desktop) */}
|
|
<ActionButtons
|
|
scrolled={scrolled}
|
|
languageSwitcher={languageSwitcher}
|
|
/>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<MobileMenuButton
|
|
isOpen={mobileMenuOpen}
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Effet de bordure dégradée moderne */}
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<div className="h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/40 to-transparent" />
|
|
<div className="h-px bg-gradient-to-r from-transparent via-banquise-blue-light/20 to-transparent blur-sm" />
|
|
</div>
|
|
|
|
{/* Effet de glow subtil */}
|
|
<div className={cn(
|
|
'absolute inset-0 pointer-events-none transition-opacity duration-500',
|
|
'bg-gradient-to-b from-banquise-blue-light/5 to-transparent',
|
|
scrolled ? 'opacity-60' : 'opacity-100'
|
|
)} />
|
|
</nav>
|
|
|
|
{/* Spacer pour compenser la navbar fixed */}
|
|
<div className={cn(
|
|
'transition-all duration-300',
|
|
scrolled ? 'h-16' : 'h-18 lg:h-20'
|
|
)} />
|
|
|
|
{/* Menu Mobile */}
|
|
<MobileMenu
|
|
isOpen={mobileMenuOpen}
|
|
onClose={() => setMobileMenuOpen(false)}
|
|
translations={translations}
|
|
/>
|
|
</>
|
|
);
|
|
};
|