288 lines
8.4 KiB
JavaScript
288 lines
8.4 KiB
JavaScript
import React, { Fragment, useState } from 'react';
|
|
import List from "@mui/material/List";
|
|
import ListItem from "@mui/material/List";
|
|
import Collapse from "@mui/material/Collapse";
|
|
import Link from "next/link";
|
|
|
|
const menus = [
|
|
{
|
|
id: 1,
|
|
title: 'Home',
|
|
link: '/',
|
|
// submenu: [
|
|
// {
|
|
// id: 11,
|
|
// title: 'Main Home',
|
|
// link: '/home'
|
|
// },
|
|
// {
|
|
// id: 12,
|
|
// title: 'Election Home',
|
|
// link: '/home2'
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// title: 'Male Candidate',
|
|
// link: '/home3'
|
|
// },
|
|
// {
|
|
// id: 14,
|
|
// title: 'Female Candidate',
|
|
// link: '/home4'
|
|
// },
|
|
// ]
|
|
},
|
|
|
|
{
|
|
id: 4,
|
|
title: 'Our Approach',
|
|
link: '/our-approach',
|
|
},
|
|
|
|
{
|
|
id: 2,
|
|
title: 'About',
|
|
link: '/about',
|
|
submenu: [
|
|
{
|
|
id: 11,
|
|
title: 'Our Mission',
|
|
link: '/about/our-mission'
|
|
},
|
|
{
|
|
id: 12,
|
|
title: 'Racial-Justice',
|
|
link: '/about/racial-justice'
|
|
},
|
|
]
|
|
},
|
|
|
|
// {
|
|
// id: 6,
|
|
// title: 'Campaign',
|
|
// link: '/campaign',
|
|
// submenu: [
|
|
// {
|
|
// id: 61,
|
|
// title: 'Campaign',
|
|
// link: '/campaign',
|
|
// },
|
|
// {
|
|
// id: 62,
|
|
// title: 'Campaign Style 2',
|
|
// link: '/campaign-2'
|
|
// },
|
|
// {
|
|
// id: 63,
|
|
// title: 'Campaign Style 3',
|
|
// link: '/campaign-3'
|
|
// },
|
|
// {
|
|
// id: 64,
|
|
// title: 'Campaign Single',
|
|
// link: '/campaign-single/Support-for-Womans'
|
|
// },
|
|
// ]
|
|
// },
|
|
{
|
|
id: 5,
|
|
title: 'Blog',
|
|
link: '/blog',
|
|
},
|
|
// {
|
|
// id: 3,
|
|
// title: 'Pages',
|
|
// link: '/',
|
|
// submenu: [
|
|
// {
|
|
// id: 31,
|
|
// title: 'Gallery',
|
|
// link: '/gallery'
|
|
// },
|
|
// {
|
|
// id: 322,
|
|
// title: 'Testimonial',
|
|
// link: '/testimonial'
|
|
// },
|
|
// {
|
|
// id: 385,
|
|
// title: 'Team',
|
|
// link: '/team',
|
|
// },
|
|
// {
|
|
// id: 386,
|
|
// title: 'Team Single',
|
|
// link: '/team-single/Esther-Howard'
|
|
// },
|
|
// {
|
|
// id: 388,
|
|
// title: 'Services',
|
|
// link: '/service'
|
|
// },
|
|
// {
|
|
// id: 389,
|
|
// title: 'Services Single',
|
|
// link: '/service-single/Economic-Establishment'
|
|
// },
|
|
// {
|
|
// id: 371,
|
|
// title: 'Shop',
|
|
// link: '/shop',
|
|
// },
|
|
// {
|
|
// id: 375,
|
|
// title: 'Shop Single',
|
|
// link: '/product-single/The-Audacity-of-Hope'
|
|
// },
|
|
// {
|
|
// id: 376,
|
|
// title: 'Cart',
|
|
// link: '/cart'
|
|
// },
|
|
// {
|
|
// id: 377,
|
|
// title: 'Checkout',
|
|
// link: '/checkout'
|
|
// },
|
|
// {
|
|
// id: 33,
|
|
// title: 'FAQ',
|
|
// link: '/faq'
|
|
// },
|
|
// {
|
|
// id: 39,
|
|
// title: 'Volunteer',
|
|
// link: '/volunteer'
|
|
// },
|
|
// {
|
|
// id: 34,
|
|
// title: '404 Error',
|
|
// link: '/404'
|
|
// },
|
|
// {
|
|
// id: 35,
|
|
// title: 'Login',
|
|
// link: '/login'
|
|
// },
|
|
// {
|
|
// id: 36,
|
|
// title: 'Register',
|
|
// link: '/register'
|
|
// },
|
|
// ]
|
|
// },
|
|
{
|
|
id: 3,
|
|
title: 'Services',
|
|
link: '/services',
|
|
},
|
|
|
|
// {
|
|
// id: 5,
|
|
// title: 'Blog',
|
|
// link: '/blog',
|
|
// submenu: [
|
|
// {
|
|
// id: 51,
|
|
// title: 'Blog',
|
|
// link: '/blog'
|
|
// },
|
|
// {
|
|
// id: 52,
|
|
// title: 'Blog Left sidebar',
|
|
// link: '/blog-left'
|
|
// },
|
|
// {
|
|
// id: 53,
|
|
// title: 'Blog full width',
|
|
// link: '/blog-fullwidth'
|
|
// },
|
|
// {
|
|
// id: 54,
|
|
// title: 'Blog single',
|
|
// link: '/blog-single/support-progressive-change'
|
|
// },
|
|
// {
|
|
// id: 55,
|
|
// title: 'Blog single Left sidebar',
|
|
// link: '/blog-single-left-sidebar/support-progressive-change'
|
|
// },
|
|
// {
|
|
// id: 56,
|
|
// title: 'Blog single Left sidebar',
|
|
// link: '/blog-single-fullwidth/support-progressive-change'
|
|
// },
|
|
// ]
|
|
// },
|
|
{
|
|
id: 88,
|
|
title: 'Contact',
|
|
link: '/contact',
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
const MobileMenu = () => {
|
|
|
|
const [openId, setOpenId] = useState(0);
|
|
const [menuActive, setMenuState] = useState(false);
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className={`mobileMenu ${menuActive ? "show" : ""}`}>
|
|
<div className="menu-close">
|
|
<div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></div>
|
|
</div>
|
|
|
|
<ul className="responsivemenu">
|
|
{menus.map((item, mn) => {
|
|
return (
|
|
<ListItem className={item.id === openId ? 'active' : null} key={mn}>
|
|
{item.submenu ?
|
|
<Fragment>
|
|
<p onClick={() => setOpenId(item.id === openId ? 0 : item.id)}>{item.title}
|
|
<i className={item.id === openId ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
|
|
</p>
|
|
<Collapse in={item.id === openId} timeout="auto" unmountOnExit>
|
|
<List className="subMenu">
|
|
<Fragment>
|
|
{item.submenu.map((submenu, i) => {
|
|
return (
|
|
<ListItem key={i}>
|
|
<Link onClick={ClickHandler} className="active"
|
|
href={submenu.link}>{submenu.title}</Link>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</Fragment>
|
|
</List>
|
|
</Collapse>
|
|
</Fragment>
|
|
: <Link className="active"
|
|
href={item.link}>{item.title}</Link>
|
|
}
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div className="showmenu" onClick={() => setMenuState(!menuActive)}>
|
|
<button type="button" className="navbar-toggler open-btn">
|
|
<span className="icon-bar first-angle"></span>
|
|
<span className="icon-bar middle-angle"></span>
|
|
<span className="icon-bar last-angle"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MobileMenu; |