| 1 |
import React, {useState, useEffect } from 'react' |
| 2 |
import { mobileMenu, menuClose } from '../data/icons' |
| 3 |
|
| 4 |
const MobileMenu = ({ current, activeNavHandler }) => { |
| 5 |
const [active, setActive] = useState(false) |
| 6 |
const menuHandler = () => { |
| 7 |
setActive(!active) |
| 8 |
} |
| 9 |
const menuActiveItemHandler = (i) => { |
| 10 |
activeNavHandler(i) |
| 11 |
setActive(false) |
| 12 |
} |
| 13 |
useEffect(() => { |
| 14 |
if(active) { |
| 15 |
document.body.style.overflow = "hidden"; |
| 16 |
} |
| 17 |
return () => (document.body.style.overflow = "scroll"); |
| 18 |
},[active]); |
| 19 |
return ( |
| 20 |
<> |
| 21 |
<div className='mobile-menu-icon' onClick={menuHandler}> |
| 22 |
{mobileMenu} |
| 23 |
</div> |
| 24 |
{active && ( |
| 25 |
<div className="mobile-menu-content"> |
| 26 |
<div className="mobile-menu-close" onClick={() => setActive(false)}> |
| 27 |
{menuClose} |
| 28 |
</div> |
| 29 |
<nav className="navigation-items-mobile"> |
| 30 |
{navs.map((item, i) => ( |
| 31 |
<a key={i} className={`navigation-item ${current === i ? "active" : " "}`} onClick={() => menuActiveItemHandler(i)}>{item.title}</a> |
| 32 |
))} |
| 33 |
</nav> |
| 34 |
</div> |
| 35 |
)} |
| 36 |
</> |
| 37 |
) |
| 38 |
} |
| 39 |
|
| 40 |
export default MobileMenu |
| 41 |
|
| 42 |
|
| 43 |
const navs = [ |
| 44 |
{ |
| 45 |
title: "Welcome", |
| 46 |
}, |
| 47 |
// { |
| 48 |
// title: "Blocks", |
| 49 |
// }, |
| 50 |
{ |
| 51 |
title: "Designs" |
| 52 |
}, |
| 53 |
// { |
| 54 |
// title: "Settings", |
| 55 |
// }, |
| 56 |
// { |
| 57 |
// title: "Colors" |
| 58 |
// }, |
| 59 |
// { |
| 60 |
// title: "Typography" |
| 61 |
// } |
| 62 |
] |
