banquise/website-front
13
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

optimize mobile navbar
Some checks failed
Build and Test / Classic Build (pull_request) Failing after 39s
Details
Build and Test / Docker Build (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Sacha VAUDEY 2025-09-14 14:51:53 +02:00
parent 0b6960085d
commit 796c7d1c21
4 changed files with 83 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
banquise-website/components/layout/MobileMenu.tsx
View File

@ -1,11 +1,8 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/common/Button';
import { Logo } from './navbar/Logo'; import { Logo } from './navbar/Logo';
import { X, Menu, Globe, Home, Info, Package, Phone, User } from 'lucide-react';
import { useTranslation } from '@/lib/hooks/useTranslation'; import { useTranslation } from '@/lib/hooks/useTranslation';
import { URLS } from '@/lib/config/constants'; 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 { DiscordLogo } from '@/components/ui/DiscordLogo';
import type { Translation } from '@/types/i18n'; import type { Translation } from '@/types/i18n';
@ -16,21 +13,19 @@ interface MobileMenuProps {
} }
interface MobileNavItemProps { interface MobileNavItemProps {
icon: React.ReactNode;
title: string; title: string;
description: string;
href: string; href: string;
isExternal?: boolean; isExternal?: boolean;
onClick?: () => void; onClick?: () => void;
isDiscord?: boolean;
} }
const MobileNavItem: React.FC<MobileNavItemProps> = ({ const MobileNavItem: React.FC<MobileNavItemProps> = ({
icon,
title, title,
description,
href, href,
isExternal = false, isExternal = false,
onClick onClick,
isDiscord = false
}) => { }) => {
const handleClick = (e: React.MouseEvent) => { const handleClick = (e: React.MouseEvent) => {
if (onClick) { if (onClick) {
@ -44,42 +39,22 @@ const MobileNavItem: React.FC<MobileNavItemProps> = ({
href={href} href={href}
onClick={handleClick} onClick={handleClick}
className={cn( className={cn(
commonClasses.mobileMenuItem, 'flex items-center justify-between px-4 py-3 rounded-lg',
commonClasses.hoverScale, 'text-white hover:bg-white/10 transition-colors duration-200',
'hover:shadow-lg hover:shadow-blue-500/20' 'border-b border-white/10 last:border-b-0'
)} )}
target={isExternal ? '_blank' : undefined} target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noopener noreferrer' : undefined} rel={isExternal ? 'noopener noreferrer' : undefined}
> >
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-3">
<div className={cn( {isDiscord && <DiscordLogo size="sm" className="text-[#5865F2]" />}
'flex items-center justify-center w-10 h-10 rounded-xl', <span className="font-medium">{title}</span>
'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>
<div className="flex-1"> {isExternal && (
<span className="block text-white font-semibold text-base group-hover:text-blue-200 transition-colors"> <svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{title} <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" />
</span>
<p className="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">
{description}
</p>
</div>
</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" />
</svg> </svg>
</div> )}
</a> </a>
); );
}; };
@ -87,94 +62,47 @@ const MobileNavItem: React.FC<MobileNavItemProps> = ({
export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, translations }) => { export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, translations }) => {
const { t } = useTranslation(); const { t } = useTranslation();
// Gérer le scroll du body - simplifié avec notre utilitaire // Gérer le scroll du body
useEffect(() => { useEffect(() => {
const originalStyle = document.body.style.overflow;
if (isOpen) { if (isOpen) {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
} else { } else {
document.body.style.overflow = originalStyle || 'unset'; document.body.style.overflow = 'unset';
} }
return () => { return () => {
document.body.style.overflow = originalStyle || 'unset'; document.body.style.overflow = 'unset';
}; };
}, [isOpen]); }, [isOpen]);
// Gestionnaire de navigation optimisé // Gestionnaire de navigation
const handleNavClick = createNavClickHandler(onClose); 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 ( return (
<div className={cn( <div className={cn(
'md:hidden fixed inset-0 z-[100] transition-all duration-300', 'md:hidden fixed inset-0 z-[100] transition-opacity duration-300',
isOpen ? 'visible' : 'invisible' isOpen ? 'visible opacity-100' : 'invisible opacity-0'
)}> )}>
{/* Overlay avec effet de blur moderne */} {/* Overlay simple */}
<div className={cn( <div
'absolute inset-0 transition-all duration-300', className="absolute inset-0 bg-black/50 backdrop-blur-sm"
'bg-gradient-to-br from-black/80 via-blue-900/60 to-black/80',
'backdrop-blur-lg',
isOpen ? 'opacity-100' : 'opacity-0'
)}
onClick={onClose} onClick={onClose}
/> />
{/* Menu Panel */} {/* Menu Panel épuré */}
<div className={cn( <div className={cn(
'absolute top-0 right-0 h-full w-80 max-w-[90vw]', 'absolute top-0 right-0 h-full w-72 max-w-[85vw]',
'bg-gradient-to-b from-blue-900/98 via-blue-900/95 to-blue-900/90', 'bg-blue-900/95 backdrop-blur-lg shadow-xl',
'backdrop-blur-2xl shadow-2xl', 'border-l border-white/10',
'border-l border-blue-300/20',
'transition-transform duration-300 ease-out', 'transition-transform duration-300 ease-out',
isOpen ? 'translate-x-0' : 'translate-x-full' isOpen ? 'translate-x-0' : 'translate-x-full'
)}> )}>
{/* Header avec Logo */} {/* Header simple */}
<div className="flex items-center justify-between p-6 pt-8 border-b border-blue-300/20"> <div className="flex items-center justify-between p-4 border-b border-white/10">
<Logo scrolled={false} /> <Logo scrolled={false} />
<button <button
className={cn( className="p-2 rounded-lg hover:bg-white/10 transition-colors"
'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'
)}
onClick={onClose} onClick={onClose}
aria-label="Fermer le menu" aria-label="Fermer le menu"
> >
@ -184,77 +112,48 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, transla
</button> </button>
</div> </div>
{/* Navigation Items */} {/* Navigation simple */}
<div className="flex flex-col h-full overflow-y-auto p-6 space-y-4"> <div className="p-4 space-y-2">
{/* Section Navigation */}
<div className="space-y-3">
<MobileNavItem <MobileNavItem
icon={icons.home}
title={translations.home} title={translations.home}
description={t.common.backToHome}
href="#home" href="#home"
onClick={() => handleNavClick('home')} onClick={() => handleNavClick('home')}
/> />
<MobileNavItem <MobileNavItem
icon={icons.services}
title={translations.services} title={translations.services}
description={t.common.discoverOffer}
href="#services" href="#services"
onClick={() => handleNavClick('services')} onClick={() => handleNavClick('services')}
/> />
<MobileNavItem <MobileNavItem
icon={icons.about}
title={translations.about} title={translations.about}
description={t.common.learnMoreAboutUs}
href="#about" href="#about"
onClick={() => handleNavClick('about')} onClick={() => handleNavClick('about')}
/> />
<MobileNavItem <MobileNavItem
icon={icons.contact}
title={translations.contact} title={translations.contact}
description={t.common.sendEmail}
href="mailto:contact@la-banquise.fr" href="mailto:contact@la-banquise.fr"
onClick={() => handleNavClick('contact')} onClick={() => handleNavClick('contact')}
/> />
</div>
{/* Divider */} {/* Séparateur simple */}
<div className="border-t border-blue-300/20 my-6" /> <div className="border-t border-white/10 my-4" />
{/* Social & External Links */}
<div className="space-y-3">
<MobileNavItem <MobileNavItem
icon={icons.discord}
title="Discord" title="Discord"
description={t.common.joinCommunity}
href={URLS.social.discord} href={URLS.social.discord}
isExternal={true} isExternal={true}
isDiscord={true}
/>
<MobileNavItem
title="Se connecter"
href={URLS.services.auth}
isExternal={true}
/> />
</div> </div>
{/* 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>
</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>
</div> </div>
); );

12
banquise-website/components/layout/ModernNavigation.tsx
View File

@ -31,12 +31,12 @@ export const ModernNavigation: React.FC<ModernNavigationProps> = ({
{/* Navigation moderne épurée */} {/* Navigation moderne épurée */}
<nav className={cn( <nav className={cn(
'fixed top-0 left-0 right-0 z-50', 'fixed top-0 left-0 right-0 z-50',
'bg-blue-700/95 backdrop-blur-md border-b border-blue-600/30', 'bg-blue-700/90 backdrop-blur-md border-b border-blue-600/20',
'transition-fast', 'transition-all duration-200',
scrolled && 'shadow-lg' scrolled && 'shadow-md'
)}> )}>
<div className="max-w-7xl mx-auto"> <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} /> <Logo scrolled={scrolled} />
@ -57,11 +57,11 @@ export const ModernNavigation: React.FC<ModernNavigationProps> = ({
</div> </div>
{/* Ligne de séparation moderne */} {/* 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> </nav>
{/* Spacer pour compenser la navbar fixed */} {/* Spacer pour compenser la navbar fixed */}
<div className="h-16" /> <div className="h-14 md:h-16" />
<MobileMenu <MobileMenu
isOpen={mobileMenuOpen} isOpen={mobileMenuOpen}

14
banquise-website/components/layout/navbar/ActionButtons.tsx
View File

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

15
banquise-website/lib/utils/index.ts
View File

@ -65,23 +65,14 @@ export const useResizeHandler = (callback: () => void, breakpoint: number = 768)
*/ */
export const commonClasses = { export const commonClasses = {
// Transitions // Transitions
transition: 'transition-all duration-300 ease-in-out', transition: 'transition-all duration-200 ease-in-out',
transitionFast: 'transition-all duration-200 ease-in-out',
// Hover effects communs // Hover effects communs
hoverLift: 'hover:-translate-y-1 hover:shadow-xl hover:scale-105',
hoverScale: 'hover:scale-105 active:scale-95', hoverScale: 'hover:scale-105 active:scale-95',
// Boutons communs // 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 // 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', navLink: 'px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg transition-colors duration-200 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',
} as const; } as const;