133 lines
4.8 KiB
JavaScript
133 lines
4.8 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";
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useRouter } from 'next/router';
|
|
import { changeLanguage } from '../../utils/commonFunction.utils';
|
|
|
|
|
|
|
|
|
|
const MobileMenu = () => {
|
|
const router = useRouter()
|
|
const { t } = useTranslation('menu'); // namespace: "menu.json"
|
|
const [openId, setOpenId] = useState(0);
|
|
const [menuActive, setMenuState] = useState(false);
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
};
|
|
|
|
|
|
const handleLanguageChange = (e) => {
|
|
const selectedLocale = e.target.value;
|
|
changeLanguage(router, selectedLocale);
|
|
};
|
|
|
|
const menus = [
|
|
{
|
|
id: 1,
|
|
title: t('home'),
|
|
link: '/',
|
|
},
|
|
{
|
|
id: 4,
|
|
title: t('ourApproach'),
|
|
link: '/our-approach',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: t('aboutUs'),
|
|
link: '/about',
|
|
submenu: [
|
|
{
|
|
id: 11,
|
|
title: t('ourMission'),
|
|
link: '/about/our-mission'
|
|
},
|
|
{
|
|
id: 12,
|
|
title: t('racialJustice'),
|
|
link: '/about/racial-justice'
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 5,
|
|
title: t('blog'),
|
|
link: '/blog',
|
|
},
|
|
{
|
|
id: 3,
|
|
title: t('services'),
|
|
link: '/services',
|
|
},
|
|
{
|
|
id: 88,
|
|
title: t('contact'),
|
|
link: '/contact',
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className={`mobileMenu ${menuActive ? "show" : ""}`}>
|
|
<div className="menu-close">
|
|
<div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></div>
|
|
</div>
|
|
|
|
<div className="language m-2" >
|
|
<select onChange={handleLanguageChange} value={router.locale} style={{ width: "100%", height: "40px" }}>
|
|
<option value="es">Spanish</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
</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; |