CHIEFSOFT\ameye
185 lines
6.3 KiB
React
185 lines
6.3 KiB
React
|
|
'use client'
|
|
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import React , {useState,useEffect} from 'react'
|
|
export const menuList = [
|
|
{
|
|
title: "Bread Agency",
|
|
links: [
|
|
{
|
|
label: "Home",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Performance",
|
|
href: "/performance",
|
|
},
|
|
{
|
|
label: "Content",
|
|
href: "/content",
|
|
},
|
|
// {
|
|
// label: "Doc landing",
|
|
// href: "/doc-landing",
|
|
// },
|
|
// {
|
|
// label: "Product landing",
|
|
// href: "/product-landing",
|
|
// },
|
|
],
|
|
},
|
|
|
|
];
|
|
export default function MobileMenuTwo() {
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
const [menuNesting, setMenuNesting] = useState([]);
|
|
const [menuItem, setMenuItem] = useState("");
|
|
const [submenu, setSubmenu] = useState("");
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
menuList.forEach((elm) => {
|
|
elm?.links?.forEach((elm2) => {
|
|
if (elm2.href == pathname) {
|
|
setMenuItem(elm.title);
|
|
} else {
|
|
elm2?.links?.map((elm3) => {
|
|
if (elm3.href == pathname) {
|
|
setMenuItem(elm.title);
|
|
setSubmenu(elm2.title);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}, []);
|
|
return (
|
|
<>
|
|
<div className="mobileMenu text-dark-1">
|
|
{menuList.map((elm, i) => {
|
|
if (elm.title) {
|
|
return (
|
|
<div key={i} className="submenuOne">
|
|
<div
|
|
className="title title1"
|
|
onClick={() =>
|
|
setMenuNesting((pre) =>
|
|
pre[0] == elm.title ? [] : [elm.title],
|
|
)
|
|
}
|
|
>
|
|
<span
|
|
className={
|
|
elm.title == menuItem ? "activeMenu" : "inActiveMenu"
|
|
}
|
|
>
|
|
{elm.title}
|
|
</span>
|
|
<Image alt='chevron'
|
|
style={{fill:'fff'}}
|
|
width={15} height={15}
|
|
src={
|
|
menuNesting[0] == elm.title
|
|
? "/images/menusicon/chevron-down.svg"
|
|
: "/images/menusicon/chevron-right.svg"
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{elm.links &&
|
|
elm.links.map((itm, index) => (
|
|
<div
|
|
key={index}
|
|
className={
|
|
menuNesting[0] == elm.title
|
|
? "toggle active"
|
|
: "toggle"
|
|
}
|
|
>
|
|
{itm.href && (
|
|
<Link
|
|
key={i}
|
|
className={
|
|
pathname == itm.href
|
|
? "activeMenu link"
|
|
: "link inActiveMenu"
|
|
}
|
|
href={itm.href}
|
|
>
|
|
{itm.label}
|
|
</Link>
|
|
)}
|
|
|
|
{itm.links && (
|
|
<div className="submenuTwo">
|
|
<div
|
|
className="title"
|
|
onClick={() =>
|
|
setMenuNesting((pre) =>
|
|
pre[1] == itm.title
|
|
? [pre[0]]
|
|
: [pre[0], itm.title],
|
|
)
|
|
}
|
|
>
|
|
<span
|
|
className={
|
|
itm.title == submenu
|
|
? "activeMenu"
|
|
: "inActiveMenu"
|
|
}
|
|
>
|
|
{itm.title && itm.title}
|
|
</span>
|
|
<Image alt='chevron'
|
|
width={22} height={22}
|
|
style={{fill:'fff'}}
|
|
src={
|
|
menuNesting[1] == itm.title
|
|
? "/images/menusicon/dash.svg"
|
|
: "/images/menusicon/plus.svg"
|
|
}
|
|
/>
|
|
</div>
|
|
<div
|
|
className={
|
|
menuNesting[1] == itm.title
|
|
? "toggle active"
|
|
: "toggle"
|
|
}
|
|
>
|
|
{itm.links &&
|
|
itm.links.map((itm2, index3) => (
|
|
<Link
|
|
key={index3}
|
|
className={
|
|
pathname == itm2.href
|
|
? "activeMenu link"
|
|
: "link inActiveMenu"
|
|
}
|
|
href={itm2.href}
|
|
>
|
|
{itm2.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
|
|
|
|
|
|
|
|
}
|