import React , { useState } from "react" ; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ; import { faBars } from "@fortawesome/free-solid-svg-icons" ; import "./Nav.css" ; import { useWindowDimensions } from "../../hooks/useWindowDimensions" ; import ReactModal from "react-modal" ; import SideBarMenus from "./sidebar/SideBarMenus" ; const Nav = ( ) => { const [ showMenu , setShowMenu ] = useState ( false ) ; const { width } = useWindowDimensions ( ) ; const getMobileMenu = ( ) => { if ( width <= 768 ) { return ( < FontAwesomeIcon onClick = { onClickToggle } icon = { faBars } size = "lg" className = "nav-mobile-menu" / > ) ; } return null ; } ; const onClickToggle = ( e ) => { setShowMenu ( ! showMenu ) ; } ; const onRequestClose = ( e ) => { setShowMenu ( false ) ; } ; return ( < React . Fragment > < ReactModal className = "modal-menu" isOpen = { showMenu } onRequestClose = { onRequestClose } shouldCloseOnOverlayClick = { true } > < SideBarMenus /> < /ReactModal> < nav > { getMobileMenu ( ) } < strong > SuperForum < /strong> < /nav> < /React.Fragment>); } ; export default Nav ;