refacore and some improvment
This commit is contained in:
parent
851a387044
commit
467dfa007d
@ -0,0 +1,100 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface MobileMenuProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
// Empêcher le scroll du body quand le menu mobile est ouvert
|
||||
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-40 transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
|
||||
{/* Overlay sombre */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Menu mobile simplifié */}
|
||||
<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 to-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl transition-transform duration-300 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
|
||||
{/* Header minimaliste */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-white/10">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo"
|
||||
className="h-8 w-auto mr-3"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
<span className="text-lg font-bold text-white font-heading">
|
||||
La Banquise
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-white/10 hover:bg-white/20 border-0 cursor-pointer p-3 text-white rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
onClick={onClose}
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M12 4L4 12M4 4L12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Boutons principaux - Centré et espacé */}
|
||||
<div className="flex flex-col items-center justify-center h-full -mt-16 space-y-8 px-8">
|
||||
|
||||
{/* Bouton Discord */}
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="w-full max-w-xs flex items-center justify-center bg-gradient-to-r from-indigo-600 to-purple-600 text-white border-0 py-6 px-8 rounded-2xl cursor-pointer no-underline font-bold text-lg shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-105 active:scale-95 group"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-200" 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>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Bouton Services */}
|
||||
<a
|
||||
href="#services"
|
||||
className="w-full max-w-xs flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-6 px-8 rounded-2xl cursor-pointer no-underline font-bold text-lg shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-105 active:scale-95 group"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-200" 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>
|
||||
<span>Nos Services</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer minimaliste */}
|
||||
<div className="absolute bottom-8 left-0 right-0 text-center">
|
||||
<p className="text-white/60 text-sm">
|
||||
© 2024 La Banquise
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,9 +1,10 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { MobileMenu } from './MobileMenu';
|
||||
|
||||
export const Navigation: React.FC = () => {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
// Fermer le menu mobile quand on clique en dehors
|
||||
// Fermer le menu mobile quand on redimensionne la fenêtre
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 768) {
|
||||
@ -15,19 +16,6 @@ export const Navigation: React.FC = () => {
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
// Empêcher le scroll du body quand le menu mobile est ouvert
|
||||
useEffect(() => {
|
||||
if (mobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [mobileMenuOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="flex justify-between items-center py-3 sm:py-4 px-4 sm:px-6 md:px-8 bg-banquise-blue-dark/95 text-white shadow-xl w-full box-border z-50 backdrop-blur-lg border-b border-banquise-blue-lightest/20 sticky top-0">
|
||||
@ -73,110 +61,11 @@ export const Navigation: React.FC = () => {
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Menu mobile overlay et contenu */}
|
||||
<div className={`md:hidden fixed inset-0 z-40 transition-all duration-300 ${mobileMenuOpen ? 'visible' : 'invisible'}`}>
|
||||
{/* Overlay sombre */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${mobileMenuOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Menu mobile */}
|
||||
<div className={`absolute top-0 right-0 h-full w-80 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark to-banquise-blue-dark/95 backdrop-blur-lg shadow-2xl transition-transform duration-300 ${mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
|
||||
{/* Header du menu mobile */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-banquise-blue-lightest/20">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo La Banquise"
|
||||
className="h-8 w-auto mr-3 drop-shadow-lg"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
<h2 className="text-lg font-bold text-white tracking-wide font-heading">
|
||||
La Banquise
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-transparent border-0 cursor-pointer p-2 text-white hover:bg-banquise-blue/20 rounded-lg transition-colors duration-200"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
aria-label="Fermer le menu"
|
||||
>
|
||||
<span className="block w-6 h-6 relative">
|
||||
<span className="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white transform -translate-x-1/2 -translate-y-1/2 rotate-45"></span>
|
||||
<span className="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white transform -translate-x-1/2 -translate-y-1/2 -rotate-45"></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation links */}
|
||||
<div className="flex flex-col p-6 space-y-4">
|
||||
<a
|
||||
href="#services"
|
||||
className="flex items-center p-4 text-white no-underline rounded-xl hover:bg-banquise-blue/20 active:bg-banquise-blue/30 transition-all duration-200 text-lg font-medium group"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="text-2xl mr-4">🚀</span>
|
||||
<span>Nos Services</span>
|
||||
<span className="ml-auto opacity-50 group-hover:opacity-100 transition-opacity duration-200">→</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="flex items-center p-4 text-white no-underline rounded-xl hover:bg-banquise-blue/20 active:bg-banquise-blue/30 transition-all duration-200 text-lg font-medium group"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="text-2xl mr-4">💬</span>
|
||||
<span>Discord</span>
|
||||
<span className="ml-auto opacity-50 group-hover:opacity-100 transition-opacity duration-200">↗</span>
|
||||
</a>
|
||||
|
||||
<div className="border-t border-banquise-blue-lightest/20 my-4"></div>
|
||||
|
||||
<a
|
||||
href="#login"
|
||||
className="flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-6 rounded-xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 active:scale-95 text-lg"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="mr-3 text-xl">👤</span>
|
||||
<span>Se connecter</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Footer du menu mobile */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 border-t border-banquise-blue-lightest/20">
|
||||
<div className="text-center">
|
||||
<p className="text-banquise-gray/70 text-sm mb-3">
|
||||
Rejoignez notre communauté
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<a
|
||||
href="https://wiki.labanquise.org"
|
||||
className="text-banquise-blue-lightest hover:text-white transition-colors duration-200 text-sm"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Wiki
|
||||
</a>
|
||||
<a
|
||||
href="https://git.labanquise.org"
|
||||
className="text-banquise-blue-lightest hover:text-white transition-colors duration-200 text-sm"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Gitea
|
||||
</a>
|
||||
<a
|
||||
href="https://panel.labanquise.org"
|
||||
className="text-banquise-blue-lightest hover:text-white transition-colors duration-200 text-sm"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Panel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Menu mobile */}
|
||||
<MobileMenu
|
||||
isOpen={mobileMenuOpen}
|
||||
onClose={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user