Megamenu

To need use a megamenu follow the steps below:

• Go to the src/components/merchandise/partial/Headerdefault.tsx this file.
• Inside Headerdefault.tsx component, Add the below code inside function components

const [isMega, setIsMega] = useState(true);

useEffect(() => {
    const handleScroll = () => {
        // Your scroll handling logic here
    };

    const updateIsMega = () => {
        setIsMega(location.asPath === "/");
    };

    window.addEventListener("scroll", handleScroll);
    updateIsMega();

    return () => {
        window.removeEventListener("scroll", handleScroll);
    };
}, []); 

• Go to the src/components/merchandise/partial/Headerdefault.tsx this file
• Inside the Headerdefault.tsx component, add the following example code in html structure where you want to display.

<Link
  className={`${location.asPath === "/" ? "active" : ""} nav-link ${isMega ? "p-0" : ""}`}
  href="/"
>
  {isMega ? (
    <img
      src="/assets/images/mega-menu/new-home.webp"
      alt="img"
      className="img-fluid d-xl-block d-none"
    />
  ) : (
    ""
  )}
  <span className="d-inline-block">OTT Home</span>
</Link>