optimize mobile navbar

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<MobileNavItemProps> = ({ 
-  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<MobileNavItemProps> = ({
       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}
     >
-      <div className="flex items-center space-x-4">
-        <div className={cn(
-          'flex items-center justify-center w-10 h-10 rounded-xl',
-          'bg-gradient-to-br from-blue-400/20 to-blue-600/20',
-          'border border-blue-300/20',
-          'group-hover:scale-110 transition-transform duration-300'
-        )}>
-          {icon}
-        </div>
-        <div className="flex-1">
-          <span className="block text-white font-semibold text-base group-hover:text-blue-200 transition-colors">
-            {title}
-          </span>
-          <p className="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">
-            {description}
-          </p>
-        </div>
+      <div className="flex items-center space-x-3">
+        {isDiscord && <DiscordLogo size="sm" className="text-[#5865F2]" />}
+        <span className="font-medium">{title}</span>
       </div>
-      
-      {/* Arrow Icon */}
-      <div className={cn(
-        'flex items-center justify-center w-6 h-6 rounded-full',
-        'text-white/40 group-hover:text-white/80 transition-all duration-300',
-        'group-hover:translate-x-1'
-      )}>
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+      {isExternal && (
+        <svg className="w-4 h-4 text-white/60" 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>
-      </div>
+      )}
     </a>
   );
 };
@@ -87,94 +62,47 @@ const MobileNavItem: React.FC<MobileNavItemProps> = ({
 export const MobileMenu: React.FC<MobileMenuProps> = ({ 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: (
-      <svg className="w-5 h-5 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-      </svg>
-    ),
-    services: (
-      <svg className="w-5 h-5 text-blue-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>
-    ),
-    about: (
-      <svg className="w-5 h-5 text-blue-200" 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>
-    ),
-    contact: (
-      <svg className="w-5 h-5 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-      </svg>
-    ),
-    discord: (
-      <DiscordLogo size="sm" className="text-[#5865F2]" />
-    ),
-    user: (
-      <svg className="w-5 h-5" 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>
-    )
-  };
-
   return (
     <div className={cn(
-      'md:hidden fixed inset-0 z-[100] transition-all duration-300',
-      isOpen ? 'visible' : 'invisible'
+      'md:hidden fixed inset-0 z-[100] transition-opacity duration-300',
+      isOpen ? 'visible opacity-100' : 'invisible opacity-0'
     )}>
-      {/* Overlay avec effet de blur moderne */}
-      <div className={cn(
-        'absolute inset-0 transition-all duration-300',
-        'bg-gradient-to-br from-black/80 via-blue-900/60 to-black/80',
-        'backdrop-blur-lg',
-        isOpen ? 'opacity-100' : 'opacity-0'
-      )}
+      {/* Overlay simple */}
+      <div 
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
         onClick={onClose}
       />
       
-      {/* Menu Panel */}
+      {/* Menu Panel épuré */}
       <div className={cn(
-        'absolute top-0 right-0 h-full w-80 max-w-[90vw]',
-        'bg-gradient-to-b from-blue-900/98 via-blue-900/95 to-blue-900/90',
-        'backdrop-blur-2xl shadow-2xl',
-        'border-l border-blue-300/20',
+        'absolute top-0 right-0 h-full w-72 max-w-[85vw]',
+        'bg-blue-900/95 backdrop-blur-lg shadow-xl',
+        'border-l border-white/10',
         'transition-transform duration-300 ease-out',
         isOpen ? 'translate-x-0' : 'translate-x-full'
       )}>
         
-        {/* Header avec Logo */}
-        <div className="flex items-center justify-between p-6 pt-8 border-b border-blue-300/20">
+        {/* Header simple */}
+        <div className="flex items-center justify-between p-4 border-b border-white/10">
           <Logo scrolled={false} />
-          
           <button 
-            className={cn(
-              'group relative p-3 rounded-xl',
-              commonClasses.transition,
-              'bg-white/10 hover:bg-white/20 active:bg-white/25',
-              'border border-white/20 hover:border-white/30',
-              commonClasses.hoverScale,
-              'focus:outline-none focus:ring-2 focus:ring-blue-400/50'
-            )}
+            className="p-2 rounded-lg hover:bg-white/10 transition-colors"
             onClick={onClose}
             aria-label="Fermer le menu"
           >
@@ -184,77 +112,48 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, transla
           </button>
         </div>
 
-        {/* Navigation Items */}
-        <div className="flex flex-col h-full overflow-y-auto p-6 space-y-4">
-          
-          {/* Section Navigation */}
-          <div className="space-y-3">
-            <MobileNavItem
-              icon={icons.home}
-              title={translations.home}
-              description={t.common.backToHome}
-              href="#home"
-              onClick={() => handleNavClick('home')}
-            />
+        {/* Navigation simple */}
+        <div className="p-4 space-y-2">
+          <MobileNavItem
+            title={translations.home}
+            href="#home"
+            onClick={() => handleNavClick('home')}
+          />
 
-            <MobileNavItem
-              icon={icons.services}
-              title={translations.services}
-              description={t.common.discoverOffer}
-              href="#services"
-              onClick={() => handleNavClick('services')}
-            />
+          <MobileNavItem
+            title={translations.services}
+            href="#services"
+            onClick={() => handleNavClick('services')}
+          />
 
-            <MobileNavItem
-              icon={icons.about}
-              title={translations.about}
-              description={t.common.learnMoreAboutUs}
-              href="#about"
-              onClick={() => handleNavClick('about')}
-            />
+          <MobileNavItem
+            title={translations.about}
+            href="#about"
+            onClick={() => handleNavClick('about')}
+          />
 
-            <MobileNavItem
-              icon={icons.contact}
-              title={translations.contact}
-              description={t.common.sendEmail}
-              href="mailto:contact@la-banquise.fr"
-              onClick={() => handleNavClick('contact')}
-            />
-          </div>
+          <MobileNavItem
+            title={translations.contact}
+            href="mailto:contact@la-banquise.fr"
+            onClick={() => handleNavClick('contact')}
+          />
 
-          {/* Divider */}
-          <div className="border-t border-blue-300/20 my-6" />
+          {/* Séparateur simple */}
+          <div className="border-t border-white/10 my-4" />
 
-          {/* Social & External Links */}
-          <div className="space-y-3">
-            <MobileNavItem
-              icon={icons.discord}
-              title="Discord"
-              description={t.common.joinCommunity}
-              href={URLS.social.discord}
-              isExternal={true}
-            />
-          </div>
+          <MobileNavItem
+            title="Discord"
+            href={URLS.social.discord}
+            isExternal={true}
+            isDiscord={true}
+          />
 
-          {/* CTA Button */}
-          <div className="mt-8 pb-6">
-            <Button
-              variant="primary"
-              size="lg"
-              leftIcon={icons.user}
-              onClick={() => {
-                window.open(URLS.services.auth, '_blank');
-                onClose();
-              }}
-              className="w-full shadow-xl"
-            >
-              {t.common.login}
-            </Button>
-          </div>
+          <MobileNavItem
+            title="Se connecter"
+            href={URLS.services.auth}
+            isExternal={true}
+          />
         </div>
-
-        {/* Effet de gradient overlay */}
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-blue-900/10 pointer-events-none" />
       </div>
     </div>
   );

banquise-website/components/layout/ModernNavigation.tsx

@@ -31,12 +31,12 @@ export const ModernNavigation: React.FC<ModernNavigationProps> = ({
       {/* Navigation moderne épurée */}
       <nav className={cn(
         'fixed top-0 left-0 right-0 z-50',
-        'bg-blue-700/95 backdrop-blur-md border-b border-blue-600/30',
-        'transition-fast',
-        scrolled && 'shadow-lg'
+        'bg-blue-700/90 backdrop-blur-md border-b border-blue-600/20',
+        'transition-all duration-200',
+        scrolled && 'shadow-md'
       )}>
         <div className="max-w-7xl mx-auto">
-          <div className="flex justify-between items-center px-4 sm:px-6 lg:px-8 h-16">
+          <div className="flex justify-between items-center px-4 sm:px-6 lg:px-8 h-14 md:h-16">
             
             <Logo scrolled={scrolled} />
 
@@ -57,11 +57,11 @@ export const ModernNavigation: React.FC<ModernNavigationProps> = ({
         </div>
 
         {/* Ligne de séparation moderne */}
-        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-400/40 to-transparent" />
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-400/30 to-transparent" />
       </nav>
 
       {/* Spacer pour compenser la navbar fixed */}
-      <div className="h-16" />
+      <div className="h-14 md:h-16" />
 
       <MobileMenu
         isOpen={mobileMenuOpen}

banquise-website/components/layout/navbar/ActionButtons.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { DiscordButton } from '@/components/ui/DiscordButton';
-import { cn } from '@/lib/utils';
 
 interface ActionButtonsProps {
   scrolled: boolean;
@@ -12,27 +11,18 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({
   languageSwitcher 
 }) => {
   return (
-    <div className="hidden md:flex items-center space-x-4">
+    <div className="hidden md:flex items-center space-x-3">
       {/* Language Switcher */}
-      <div className="flex items-center">
-        {languageSwitcher}
-      </div>
+      {languageSwitcher}
       
       {/* Discord Button */}
-      <div className="flex items-center">
-        <DiscordButton 
-          size="sm" 
-          className={cn(
-            "transition-all duration-200",
-            "hover:scale-105 hover:shadow-lg",
-            "focus:outline-none focus:ring-2 focus:ring-discord/50",
-            scrolled && "shadow-md"
-          )}
-          showIcon={true}
-        >
-          Discord
-        </DiscordButton>
-      </div>
+      <DiscordButton 
+        size="sm" 
+        className="transition-all duration-200 hover:scale-105"
+        showIcon={true}
+      >
+        Discord
+      </DiscordButton>
     </div>
   );
 };

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;