import Link from 'next/link'; import { FC, Fragment, Key, useEffect, useRef, useState } from 'react'; import useSticky from 'hooks/useSticky'; import NextLink from 'components/atoms/NextLink'; import logo from '@/../public/images/Home-Logo-Head.svg'; import Image from 'next/image'; import hamburguer from '@/../public/images/layout/hamburguer-white.svg'; import DropdownToggleLink from '@/components/atoms/DropdownToggleLink'; import arrow from '@/../public/images/layout/arrow-white.svg'; import facebookIcon from '@/../public/images/home/Facebook.svg'; import instagramIcon from '@/../public/images/home/Instagram.svg'; import tiktokIcon from '@/../public/images/home/Tik_Tok.svg'; import ListItemLink from '@/components/atoms/ListItemLink'; import classNames from 'classnames'; import useScrollLockOnElementClass from '@/hooks/useScrollLockOnElementClass'; import { useRouter } from 'next/router'; type NavbarProps = { sticky?: boolean; stickyBox?: boolean; navClassName?: string; navOtherClass?: string; translatedPath: string; locale: string; trans: any; categories: any; }; const Navbar: FC = (props) => { const { navClassName, navOtherClass, stickyBox, translatedPath = '#', locale = 'es', trans, categories = [] } = props; useScrollLockOnElementClass('offcanvas-nav', 'show'); const useStickyHook = useSticky(150); const sticky = props?.sticky ? useStickyHook : false; const navbarRef = useRef(null); const fixedClassName = 'navbar navbar-expand-lg center-nav transparent navbar-clone fixed'; const router = useRouter(); useEffect(() => { const bootstrap = require('bootstrap'); const handleRouteChange = () => { const offcanvasElement = document.getElementById('offcanvas-nav'); if (offcanvasElement) { const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasElement) || new bootstrap.Offcanvas(offcanvasElement); offcanvas.hide(); } }; router.events.on('routeChangeStart', handleRouteChange); return () => { router.events.off('routeChangeStart', handleRouteChange); }; }, [router.events]); // Manejadores para mostrar/ocultar el submenú const [isSubmenuVisible, setSubmenuVisible] = useState(false); const timeoutRef = useRef(null); // Para almacenar el temporizador de ocultación const handleMouseEnter = () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); // Cancelar cualquier temporizador activo setSubmenuVisible(true); }; const handleMouseLeave = () => { // Inicia un temporizador antes de ocultar el submenú timeoutRef.current = setTimeout(() => setSubmenuVisible(false), 300); // 200ms de retraso }; const handleSubmenuEnter = () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); // Cancela el temporizador al entrar al submenú }; const handleSubmenuLeave = () => { // Inicia el temporizador para ocultar cuando el usuario sale del submenú timeoutRef.current = setTimeout(() => setSubmenuVisible(false), 300); }; // Manejadores para mostrar/ocultar el submenú de Ciudades const [isCitiesSubmenuVisible, setCitiesSubmenuVisible] = useState(false); const citiesTimeoutRef = useRef(null); const handleCitiesMouseEnter = () => { if (citiesTimeoutRef.current) clearTimeout(citiesTimeoutRef.current); setCitiesSubmenuVisible(true); }; const handleCitiesMouseLeave = () => { citiesTimeoutRef.current = setTimeout(() => setCitiesSubmenuVisible(false), 300); }; const handleCitiesSubmenuEnter = () => { if (citiesTimeoutRef.current) clearTimeout(citiesTimeoutRef.current); }; const handleCitiesSubmenuLeave = () => { citiesTimeoutRef.current = setTimeout(() => setCitiesSubmenuVisible(false), 300); }; const headerContent = (
  • {trans('common:topHeader.lang')}
} />
{' '} {trans('common:topHeader.lang')}
} />
  • {trans('common:header.home')}
  • {trans('common:header.about-us')}
  • {trans('common:header.projects')}
    • {
  • setSubmenuVisible(!isSubmenuVisible)} > {trans('common:header.projects')}{' '} {isSubmenuVisible ? ( ) : ( )}
    • } {categories.length && isSubmenuVisible ? (
      {categories && categories?.map((category: any, key: number) => { return (
      • {(category.projects && category.projects.map( (project: { redirectLink: string; shouldRedirect: boolean; id: Key; name: string; slug: string; }) => (
        • ) )) || ''}
      • ); })}
    ) : ( '' )}
  • {trans('common:header.cities')}
    • {
  • setCitiesSubmenuVisible(!isCitiesSubmenuVisible)} > {trans('common:header.cities')}{' '} {isCitiesSubmenuVisible ? ( ) : ( )}
    • } {categories.length && isCitiesSubmenuVisible ? (
      {categories && categories?.map((city: any, key: number) => { return (
    • {city?.name}
      • ); })}
    ) : ( '' )}
  • {trans('common:header.sustainability')}
  • {trans('common:header.talents')}
  • {trans('common:header.contact')}
  • Facebook Instagram TikTok
  • {trans('common:topHeader.blog')}
    • { /*
  • {trans('common:header.human-capital')}
  • {trans('common:footer:agents')}
    • */}
); /* let menuLine1, menuLine2, menuLine3; if (categories.length === 1) { menuLine1 = [categories[0]]; } else if (categories.length > 1) { menuLine1 = [categories[0], categories[1]]; } if (categories.length > 3) { menuLine2 = [categories[2], categories[3]]; } if (categories.length > 5) { menuLine3 = [categories[4], categories[5]]; } */ const columnCount = 3; // Ordenamos alfabéticamente por nombre const sortedCategories = [...categories].sort((a, b) => a.name.localeCompare(b.name) ); // Calculamos cuántos elementos por fila (aproximadamente) const itemsPerRow = Math.ceil(sortedCategories.length / columnCount); // Cortamos en filas const menuLines: any = []; for (let i = 0; i < columnCount; i++) { const start = i * itemsPerRow; const end = start + itemsPerRow; menuLines.push(sortedCategories.slice(start, end)); } // Ahora tienes: const [menuLine1, menuLine2, menuLine3] = menuLines; return (
{stickyBox &&
} {categories.length && isSubmenuVisible ? (
    {menuLine1 && menuLine1?.map((category: { id: Key; name: string; projects: any; order: number }) => ( <>
  • {category.name}
    • {category.projects && category.projects.map( (project: { id: Key; name: string; slug: string; shouldRedirect: boolean; redirectLink: string; }) => (
  • {project.name}
    • ) )}
  • ))}
    {menuLine2 && menuLine2.map((category: { id: Key; name: string; projects: any; order: number }) => ( <>
  • {category.name}
    • {category.projects && category.projects.map( (project: { id: Key; name: string; slug: string; shouldRedirect: boolean; redirectLink: string; }) => (
  • {project.name}
    • ) )}
  • ))}
    {menuLine3 && menuLine3.map((category: { id: Key; name: string; projects: any; order: number }) => ( <>
  • {category.name}
    • {category.projects && category.projects.map( (project: { id: Key; name: string; slug: string; shouldRedirect: boolean; redirectLink: string; }) => (
  • {project.name}
    • ) )} ))}
) : null} {categories.length && isCitiesSubmenuVisible ? (
    {menuLine1 && menuLine1?.map((city: { id: Key; name: string; slug: string }) => (
  • {city.name}
    • ))}
    {menuLine2 && menuLine2.map((city: { id: Key; name: string; slug: string }) => (
  • {city.name}
    • ))}
    {menuLine3 && menuLine3.map((city: { id: Key; name: string; slug: string }) => (
  • {city.name}
    • ))}
) : null}
); }; Navbar.defaultProps = { sticky: true, stickyBox: true, navOtherClass: 'navbar-other d-flex d-lg-none', navClassName: 'navbar navbar-expand-lg center-nav navbar-light tw-z-[9999] tw-bg-secondary-color' }; export default Navbar;