From 467dfa007da471cc1e597082c67e76ece1ad8dfe Mon Sep 17 00:00:00 2001
From: Sacha VAUDEY <sacha.vaudey@epita.fr>
Date: Sat, 31 May 2025 22:16:47 +0200
Subject: [PATCH] refacore and some improvment

---
 .../src/components/layout/MobileMenu.tsx      | 100 ++++++++++++++
 .../src/components/layout/Navigation.tsx      | 125 +-----------------
 2 files changed, 107 insertions(+), 118 deletions(-)

diff --git a/banquise-website/src/components/layout/MobileMenu.tsx b/banquise-website/src/components/layout/MobileMenu.tsx
index e69de29..a6565d0 100644
--- a/banquise-website/src/components/layout/MobileMenu.tsx
+++ b/banquise-website/src/components/layout/MobileMenu.tsx
@@ -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>
+  );
+};
diff --git a/banquise-website/src/components/layout/Navigation.tsx b/banquise-website/src/components/layout/Navigation.tsx
index f34605b..cf96e65 100644
--- a/banquise-website/src/components/layout/Navigation.tsx
+++ b/banquise-website/src/components/layout/Navigation.tsx
@@ -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)} 
+      />
     </>
   );
 };