diff --git a/banquise-website/components/layout/MobileMenu.tsx b/banquise-website/components/layout/MobileMenu.tsx index 49f07dd..1104a39 100644 --- a/banquise-website/components/layout/MobileMenu.tsx +++ b/banquise-website/components/layout/MobileMenu.tsx @@ -1,11 +1,8 @@ import React, { useEffect } from 'react'; -import Link from 'next/link'; -import { Button } from '@/components/common/Button'; import { Logo } from './navbar/Logo'; -import { X, Menu, Globe, Home, Info, Package, Phone, User } from 'lucide-react'; import { useTranslation } from '@/lib/hooks/useTranslation'; import { URLS } from '@/lib/config/constants'; -import { cn, commonClasses, createNavClickHandler } from '@/lib/utils'; +import { cn, createNavClickHandler } from '@/lib/utils'; import { DiscordLogo } from '@/components/ui/DiscordLogo'; import type { Translation } from '@/types/i18n'; @@ -16,21 +13,19 @@ interface MobileMenuProps { } interface MobileNavItemProps { - icon: React.ReactNode; title: string; - description: string; href: string; isExternal?: boolean; onClick?: () => void; + isDiscord?: boolean; } const MobileNavItem: React.FC = ({ - icon, title, - description, href, isExternal = false, - onClick + onClick, + isDiscord = false }) => { const handleClick = (e: React.MouseEvent) => { if (onClick) { @@ -44,42 +39,22 @@ const MobileNavItem: React.FC = ({ href={href} onClick={handleClick} className={cn( - commonClasses.mobileMenuItem, - commonClasses.hoverScale, - 'hover:shadow-lg hover:shadow-blue-500/20' + 'flex items-center justify-between px-4 py-3 rounded-lg', + 'text-white hover:bg-white/10 transition-colors duration-200', + 'border-b border-white/10 last:border-b-0' )} target={isExternal ? '_blank' : undefined} rel={isExternal ? 'noopener noreferrer' : undefined} > -
-
- {icon} -
-
- - {title} - -

- {description} -

-
+
+ {isDiscord && } + {title}
- - {/* Arrow Icon */} -
- - + {isExternal && ( + + -
+ )} ); }; @@ -87,94 +62,47 @@ const MobileNavItem: React.FC = ({ export const MobileMenu: React.FC = ({ isOpen, onClose, translations }) => { const { t } = useTranslation(); - // Gérer le scroll du body - simplifié avec notre utilitaire + // Gérer le scroll du body useEffect(() => { - const originalStyle = document.body.style.overflow; - if (isOpen) { document.body.style.overflow = 'hidden'; } else { - document.body.style.overflow = originalStyle || 'unset'; + document.body.style.overflow = 'unset'; } return () => { - document.body.style.overflow = originalStyle || 'unset'; + document.body.style.overflow = 'unset'; }; }, [isOpen]); - // Gestionnaire de navigation optimisé + // Gestionnaire de navigation const handleNavClick = createNavClickHandler(onClose); - // Configuration des icônes SVG - factorisation - const icons = { - home: ( - - - - ), - services: ( - - - - ), - about: ( - - - - ), - contact: ( - - - - ), - discord: ( - - ), - user: ( - - - - ) - }; - return (
- {/* Overlay avec effet de blur moderne */} -
- {/* Menu Panel */} + {/* Menu Panel épuré */}
- {/* Header avec Logo */} -
+ {/* Header simple */} +
-
- {/* Navigation Items */} -
- - {/* Section Navigation */} -
- handleNavClick('home')} - /> + {/* Navigation simple */} +
+ handleNavClick('home')} + /> - handleNavClick('services')} - /> + handleNavClick('services')} + /> - handleNavClick('about')} - /> + handleNavClick('about')} + /> - handleNavClick('contact')} - /> -
+ handleNavClick('contact')} + /> - {/* Divider */} -
+ {/* Séparateur simple */} +
- {/* Social & External Links */} -
- -
+ - {/* CTA Button */} -
- -
+
- - {/* Effet de gradient overlay */} -
); diff --git a/banquise-website/components/layout/ModernNavigation.tsx b/banquise-website/components/layout/ModernNavigation.tsx index a21414a..02fd6ac 100644 --- a/banquise-website/components/layout/ModernNavigation.tsx +++ b/banquise-website/components/layout/ModernNavigation.tsx @@ -31,12 +31,12 @@ export const ModernNavigation: React.FC = ({ {/* Navigation moderne épurée */} {/* Spacer pour compenser la navbar fixed */} -
+
= ({ languageSwitcher }) => { return ( -
+
{/* Language Switcher */} -
- {languageSwitcher} -
+ {languageSwitcher} {/* Discord Button */} -
- - Discord - -
+ + Discord +
); }; \ No newline at end of file diff --git a/banquise-website/lib/utils/index.ts b/banquise-website/lib/utils/index.ts index 00db104..8aad5e4 100644 --- a/banquise-website/lib/utils/index.ts +++ b/banquise-website/lib/utils/index.ts @@ -65,23 +65,14 @@ export const useResizeHandler = (callback: () => void, breakpoint: number = 768) */ export const commonClasses = { // Transitions - transition: 'transition-all duration-300 ease-in-out', - transitionFast: 'transition-all duration-200 ease-in-out', + transition: 'transition-all duration-200 ease-in-out', // Hover effects communs - hoverLift: 'hover:-translate-y-1 hover:shadow-xl hover:scale-105', hoverScale: 'hover:scale-105 active:scale-95', // Boutons communs - buttonBase: 'inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400/50', + buttonBase: 'inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400/50', // Navigation - navLink: 'px-4 py-2.5 text-white/90 hover:text-white font-medium rounded-xl transition-all duration-300 hover:bg-white/10', - - // Cards - cardBase: 'backdrop-blur-lg rounded-2xl border transition-all duration-300', - cardHover: 'hover:shadow-xl hover:-translate-y-1', - - // Mobile menu items - mobileMenuItem: 'group flex items-center justify-between p-4 rounded-xl transition-all duration-300 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20', + navLink: 'px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg transition-colors duration-200 hover:bg-white/10', } as const; \ No newline at end of file