first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,475 @@
|
||||
|
||||
'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: "Home",
|
||||
links: [
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/project-management",
|
||||
},
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/customer-support",
|
||||
},
|
||||
{
|
||||
label: "Doc landing",
|
||||
href: "/doc-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing",
|
||||
href: "/product-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing Dark",
|
||||
href: "/product-landing-dark",
|
||||
},
|
||||
{
|
||||
label: "Note Taking App landing",
|
||||
href: "/note-taking-landing",
|
||||
},
|
||||
{
|
||||
label: "Video Editor Landing",
|
||||
href: "/video-editor-landing",
|
||||
},
|
||||
{
|
||||
label: "Appointment Scheduling",
|
||||
href: "/appointment-scheduling",
|
||||
},
|
||||
{
|
||||
label: "Mobile App",
|
||||
href: "/mobile-app-landing",
|
||||
},
|
||||
{
|
||||
label: "Doc Signature",
|
||||
href: "/doc-signature",
|
||||
},
|
||||
{
|
||||
label: "Website Builder",
|
||||
href: "/website-builder",
|
||||
},
|
||||
{
|
||||
label: "Form Survey",
|
||||
href: "/form-survey-landing",
|
||||
},
|
||||
{
|
||||
label: "VR Landing",
|
||||
href: "/vr-landing",
|
||||
},
|
||||
{
|
||||
label: "E-Commerce",
|
||||
href: "/e-commerce",
|
||||
},
|
||||
{
|
||||
label: "Coming Soon",
|
||||
href: "/coming-soon",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pages",
|
||||
links: [
|
||||
{
|
||||
title: "Pricing",
|
||||
links: [
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/pricing-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/pricing-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/pricing-pm",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "About Us",
|
||||
|
||||
links:[
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/about-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/about-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/about-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/about-doc",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
links: [
|
||||
{
|
||||
label: "Custom Support",
|
||||
href: "/contact-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organizer",
|
||||
href: "/contact-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/contact-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/contact-doc",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Teams",
|
||||
links: [
|
||||
{
|
||||
label: "Team Version 01",
|
||||
href: "/team-1",
|
||||
},
|
||||
{
|
||||
label: "Team Version 02",
|
||||
href: "/team-2",
|
||||
},
|
||||
{
|
||||
label: "Team Version 03",
|
||||
href: "/team-3",
|
||||
},
|
||||
{
|
||||
label: "Team Version 04",
|
||||
href: "/team-4",
|
||||
},
|
||||
{
|
||||
label: "Team Version 05",
|
||||
href: "/team-5",
|
||||
},
|
||||
{
|
||||
label: "Team Version 06",
|
||||
href: "/team-6",
|
||||
},
|
||||
{
|
||||
label: "Team Details",
|
||||
href: "/teams/1",
|
||||
},
|
||||
{
|
||||
label: "Team Details Slider",
|
||||
href: "/team-details-v2/1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ href: "/faq", label: "Faq" },
|
||||
{ href: "/faqs/2", label: "Faq Details" },
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Features",
|
||||
links: [
|
||||
{
|
||||
title: "Services",
|
||||
links: [
|
||||
{
|
||||
label: "Service Version 01",
|
||||
href: "/service-v1",
|
||||
},
|
||||
{
|
||||
label: "Service Version 02",
|
||||
href: "/service-v2",
|
||||
},
|
||||
{
|
||||
label: "Service Version 03",
|
||||
href: "/service-v3",
|
||||
},
|
||||
{
|
||||
label: "Service Version 04",
|
||||
href: "/service-v4",
|
||||
},
|
||||
{
|
||||
label: "Service Details",
|
||||
href: "/services/3",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Miscellaneous",
|
||||
links: [
|
||||
{
|
||||
label: "Terms & Condition",
|
||||
href: "/terms-conditions",
|
||||
},
|
||||
{
|
||||
label: "Login",
|
||||
href: "/login",
|
||||
},
|
||||
{
|
||||
label: "Signup",
|
||||
href: "/signup",
|
||||
},
|
||||
{
|
||||
label: "404",
|
||||
href: "/not-found",
|
||||
},
|
||||
]
|
||||
},
|
||||
{ href: "/solution-management", label: "Our Solution" },
|
||||
{ href: "/product-customer-support", label: "Product Features" },
|
||||
{ href: "/features-customer-support", label: "Our Features" },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
links: [
|
||||
{
|
||||
label: "Classic Style",
|
||||
href: "/classic-style",
|
||||
},
|
||||
{
|
||||
label: "Grid 2 Columns",
|
||||
href: "/grid-two-col",
|
||||
},
|
||||
{
|
||||
label: "Grid 3 Columns",
|
||||
href: "/grid-three-col",
|
||||
},
|
||||
{
|
||||
label: "Gallery Slider",
|
||||
href: "/gallery-slider",
|
||||
},
|
||||
{
|
||||
label: "Grid Single",
|
||||
href: "/grid-single",
|
||||
},
|
||||
{
|
||||
label: "Classic Details",
|
||||
href: "/portfolios/2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Blogs",
|
||||
links: [
|
||||
{
|
||||
label: "Blog Version 01",
|
||||
href: "/blog-v1",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 02",
|
||||
href: "/blog-v2",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 03",
|
||||
href: "/blog-v3",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 04",
|
||||
href: "/blog-v4",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 05",
|
||||
href: "/blog-v5",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 06",
|
||||
href: "/blog-v6",
|
||||
},
|
||||
{
|
||||
label: "Blog Details",
|
||||
href: "/blogs/3",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Docs",
|
||||
links: [
|
||||
{
|
||||
label: "Full Width",
|
||||
href: "/doc-full-width",
|
||||
},
|
||||
{
|
||||
label: "Full Width Banner",
|
||||
href: "/doc-full-width-banner",
|
||||
},
|
||||
{
|
||||
label: "Doc Box",
|
||||
href: "/doc-box",
|
||||
},
|
||||
{
|
||||
label: "Doc Box With Banner",
|
||||
href: "/doc-box-with-banner",
|
||||
},
|
||||
{
|
||||
label: "Changelog",
|
||||
href: "/changelog",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
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>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user