next-cochise/src/components/Header.tsx

import HeaderNav from "@/components/HeaderNav";
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
import Image from "next/image";
import Link from "next/link";

export default function Header1Multipage({ links }: any) {
  return (
    <div className="main-nav-sub full-wrapper">
      {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
              If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
              image size for support of retina screens. See details in the template documentation. *) */}
      <div className="nav-logo-wrap local-scroll">
        <Link href={`/`} className="logo">
          <Image
            src="/assets/images/demo-slick/logo-dark.webp"
            alt="Your Company Logo"
            width={105}
            height={34}
            className="light-mode-logo"
          />
          <Image
            src="/assets/images/demo-slick/logo-dark.webp"
            alt="Your Company Logo"
            width={405}
            height={34}
            className="dark-mode-logo"
          />
        </Link>
      </div>
      {/* Mobile Menu Button */}
      <div onClick={toggleMobileMenu} className="mobile-nav" role="button" tabIndex={0}>
        <i className="mobile-nav-icon" />
        <span className="visually-hidden">Menu</span>
      </div>
      {/* Main Menu */}
      <div className="inner-nav desktop-nav">
        <ul className="clearlist local-scroll">
          {/* Item With Sub */}
          <HeaderNav links={links} />
          {/* End Item With Sub */}
        </ul>
        <ul className="items-end clearlist">
          {/* Languages */}
          {/* <LanguageSelect /> */}
          {/* End Languages */}
          <li></li>
        </ul>
      </div>
      {/* End Main Menu */}
    </div>
  );
}