146 lines
5.0 KiB
JavaScript
146 lines
5.0 KiB
JavaScript
"use client";
|
|
import Link from "next/link";
|
|
import { menuData } from "@/data/menu";
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
export default function Nav() {
|
|
const [parentActive, setParentActive] = useState(-1);
|
|
const [subparentActive, setsubParentActive] = useState(-1);
|
|
const pathname = usePathname();
|
|
const isMenuActive = (menuItem = menuData[0]) => {
|
|
let active = false;
|
|
if (menuItem.href?.includes("/")) {
|
|
if (menuItem.href?.split("/")[1] == pathname.split("/")[1]) {
|
|
active = true;
|
|
}
|
|
}
|
|
if (menuItem.submenu) {
|
|
menuItem.submenu?.forEach((elm2) => {
|
|
if (elm2.href?.includes("/")) {
|
|
if (elm2.href?.split("/")[1] == pathname.split("/")[1]) {
|
|
active = true;
|
|
}
|
|
}
|
|
if (elm2.submenu) {
|
|
elm2.submenu.forEach((elm3) => {
|
|
if (elm3.href.split("/")[1] == pathname.split("/")[1]) {
|
|
active = true;
|
|
}
|
|
});
|
|
}
|
|
if (elm2.homeMenuItems) {
|
|
elm2.homeMenuItems.forEach((elm3) => {
|
|
if (elm3.buttons) {
|
|
elm3.buttons.forEach((elm4) => {
|
|
if (elm4.href == pathname) {
|
|
active = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return active;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{menuData.map((item, index) => (
|
|
<li key={index} className={item.className || ""}>
|
|
<Link
|
|
href={item.href}
|
|
className={isMenuActive(item) ? "menuActive" : ""}
|
|
onClick={() =>
|
|
setParentActive((pre) => (pre == index ? -1 : index))
|
|
}
|
|
>
|
|
{item.label} {item.iconClass && <i className={item.iconClass}></i>}{" "}
|
|
</Link>
|
|
{item.submenu && (
|
|
<ul
|
|
className={`submenu ${
|
|
item.label == "Home" ? "has-homemenu" : ""
|
|
} ${parentActive == index ? "active" : ""} `}
|
|
>
|
|
{item.submenu.map((subItem, subIndex) =>
|
|
subItem.homeMenuItems ? (
|
|
<li key={subIndex}>
|
|
<div className="homemenu-items">
|
|
{subItem.homeMenuItems.map((homeItem, homeIndex) => (
|
|
<div className="homemenu" key={homeIndex}>
|
|
<div className="homemenu-thumb">
|
|
<Image
|
|
src={homeItem.imageSrc}
|
|
width={240}
|
|
height={300}
|
|
alt="img"
|
|
/>
|
|
<div className="demo-button">
|
|
{homeItem.buttons.map((button, buttonIndex) => (
|
|
<Link
|
|
href={button.href}
|
|
className="theme-btn"
|
|
key={buttonIndex}
|
|
>
|
|
{button.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="homemenu-content text-center">
|
|
<h4 className="homemenu-title">{homeItem.title}</h4>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</li>
|
|
) : (
|
|
<li key={subIndex} className={subItem.className || ""}>
|
|
<Link
|
|
href={subItem.href}
|
|
className={isMenuActive(subItem) ? "menuActive" : ""}
|
|
onClick={() =>
|
|
setsubParentActive((pre) =>
|
|
pre == subIndex ? -1 : subIndex
|
|
)
|
|
}
|
|
>
|
|
{subItem.label}{" "}
|
|
{subItem.iconClass && (
|
|
<i className={subItem.iconClass}></i>
|
|
)}
|
|
</Link>
|
|
{subItem.submenu && (
|
|
<ul
|
|
className={`submenu ${
|
|
subparentActive == subIndex ? "active" : ""
|
|
} `}
|
|
>
|
|
{subItem.submenu.map((nestedItem, nestedIndex) => (
|
|
<li key={nestedIndex}>
|
|
<Link
|
|
className={
|
|
isMenuActive(nestedItem) ? "menuActive" : ""
|
|
}
|
|
href={nestedItem.href}
|
|
>
|
|
{nestedItem.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
))}
|
|
</>
|
|
);
|
|
}
|