diff --git a/.env b/.env index 77083f61..c41d5e83 100644 --- a/.env +++ b/.env @@ -23,6 +23,7 @@ DIRECTUS_ADMIN_PASSWORD=Tim300493. DIRECTUS_API_TOKEN=59fb8f4c1a51b18fe28ad947f713914e DIRECTUS_DB_NAME=directus DIRECTUS_DB_USER=directus +DIRECTUS_DB_PASSWORD=directus # Local Development PROJECT_NAME=klz-cables GATEKEEPER_BYPASS_ENABLED=true diff --git a/components/Header.tsx b/components/Header.tsx index a6faebb8..50cbaf9c 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -14,10 +14,10 @@ export default function Header() { const pathname = usePathname(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - + // Extract locale from pathname const currentLocale = pathname.split('/')[1] || 'en'; - + // Check if homepage const isHomePage = pathname === `/${currentLocale}` || pathname === '/'; @@ -32,8 +32,10 @@ export default function Header() { // Close mobile menu on route change useEffect(() => { - setIsMobileMenuOpen(false); - }, [pathname]); + if (isMobileMenuOpen) { + setIsMobileMenuOpen(false); + } + }, [pathname, isMobileMenuOpen]); // Prevent scroll when mobile menu is open useEffect(() => { @@ -43,7 +45,7 @@ export default function Header() { document.body.style.overflow = 'unset'; } }, [isMobileMenuOpen]); - + // Function to get path for a different locale const getPathForLocale = (newLocale: string) => { const segments = pathname.split('/'); @@ -59,15 +61,15 @@ export default function Header() { ]; const headerClass = cn( - "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu", + 'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu', { - "bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen, - "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen, - } + 'bg-transparent py-4 md:py-8': isHomePage && !isScrolled && !isMobileMenuOpen, + 'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen, + }, ); - const textColorClass = "text-white"; - const logoSrc = "/logo-white.svg"; + const textColorClass = 'text-white'; + const logoSrc = '/logo-white.svg'; return ( <> @@ -75,14 +77,14 @@ export default function Header() { className={headerClass} initial={{ y: -100, opacity: 0 }} animate={{ y: 0, opacity: 1 }} - transition={{ duration: 0.8, ease: "easeOut" }} + transition={{ duration: 0.8, ease: 'easeOut' }} >
- + {menuItems.map((item, idx) => ( - + {item.label} @@ -134,7 +130,7 @@ export default function Header() { - +
@@ -367,9 +376,9 @@ const navVariants = { opacity: 1, transition: { staggerChildren: 0.06, - delayChildren: 0.1 - } - } + delayChildren: 0.1, + }, + }, } as const; const navLinkVariants = { @@ -380,9 +389,9 @@ const navLinkVariants = { scale: 1, transition: { duration: 0.5, - ease: "easeOut" - } - } + ease: 'easeOut', + }, + }, } as const; const headerRightVariants = { @@ -390,6 +399,6 @@ const headerRightVariants = { visible: { opacity: 1, x: 0, - transition: { duration: 0.6, ease: "easeOut" } - } + transition: { duration: 0.6, ease: 'easeOut' }, + }, } as const; diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx index 861d298c..af0f55bb 100644 --- a/components/Lightbox.tsx +++ b/components/Lightbox.tsx @@ -25,15 +25,18 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh return () => setMounted(false); }, []); - const updateUrl = useCallback((index: number | null) => { - const params = new URLSearchParams(searchParams.toString()); - if (index !== null) { - params.set('photo', index.toString()); - } else { - params.delete('photo'); - } - router.replace(`${pathname}?${params.toString()}`, { scroll: false }); - }, [pathname, router, searchParams]); + const updateUrl = useCallback( + (index: number | null) => { + const params = new URLSearchParams(searchParams.toString()); + if (index !== null) { + params.set('photo', index.toString()); + } else { + params.delete('photo'); + } + router.replace(`${pathname}?${params.toString()}`, { scroll: false }); + }, + [pathname, router, searchParams], + ); const prevImage = useCallback(() => { setCurrentIndex((prev) => { @@ -61,6 +64,11 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh } }, [searchParams, images.length]); + const handleClose = useCallback(() => { + updateUrl(null); + onClose(); + }, [updateUrl, onClose]); + useEffect(() => { if (isOpen) { updateUrl(currentIndex); @@ -79,22 +87,17 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh // Lock scroll const originalStyle = window.getComputedStyle(document.body).overflow; document.body.style.overflow = 'hidden'; - + window.addEventListener('keydown', handleKeyDown); - + return () => { document.body.style.overflow = originalStyle; window.removeEventListener('keydown', handleKeyDown); }; - }, [isOpen, prevImage, nextImage]); + }, [isOpen, prevImage, nextImage, handleClose]); if (!mounted) return null; - const handleClose = () => { - updateUrl(null); - onClose(); - }; - return createPortal( {isOpen && ( @@ -121,7 +124,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh × - + - ‹ + + ‹ + - + - › + + › + - - + {/* Technical Detail: Subtle grid overlay to reinforce industrial precision */}
- + {/* Premium Reflection: Subtle gradient to give material feel */}
- - )} , - document.body + document.body, ); } diff --git a/components/home/GallerySection.tsx b/components/home/GallerySection.tsx index 4eb7b3c7..c8fd71a1 100644 --- a/components/home/GallerySection.tsx +++ b/components/home/GallerySection.tsx @@ -27,11 +27,11 @@ export default function GallerySection() { if (photoParam !== null) { const index = parseInt(photoParam, 10); if (!isNaN(index) && index >= 0 && index < images.length) { - setLightboxIndex(index); - setLightboxOpen(true); + if (lightboxIndex !== index) setLightboxIndex(index); + if (!lightboxOpen) setLightboxOpen(true); } } - }, [searchParams, images.length]); + }, [searchParams, images.length, lightboxIndex, lightboxOpen]); return (
@@ -39,7 +39,7 @@ export default function GallerySection() { {t('title')} - +
{images.map((src, idx) => (