diff options
Diffstat (limited to 'src/components/MainNav/MainNav.tsx')
| -rw-r--r-- | src/components/MainNav/MainNav.tsx | 46 |
1 files changed, 13 insertions, 33 deletions
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx index c7789ba..dcaba30 100644 --- a/src/components/MainNav/MainNav.tsx +++ b/src/components/MainNav/MainNav.tsx @@ -9,42 +9,22 @@ import { import { NavItem } from '@ts/types/nav'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { SetStateAction, useCallback, useEffect, useRef } from 'react'; +import { ForwardedRef, forwardRef, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import styles from './MainNav.module.scss'; -const MainNav = ({ - isOpened, - setIsOpened, -}: { - isOpened: boolean; - setIsOpened: (value: SetStateAction<boolean>) => void; -}) => { +const MainNav = ( + { + isOpened, + setIsOpened, + }: { + isOpened: boolean; + setIsOpened: (value: SetStateAction<boolean>) => void; + }, + ref: ForwardedRef<HTMLDivElement> +) => { const intl = useIntl(); const router = useRouter(); - const mainNavRef = useRef<HTMLDivElement>(null); - - const handleVisibility = useCallback( - (e: MouseEvent | FocusEvent) => { - if ( - mainNavRef.current && - !mainNavRef.current.contains(e.target as Node) - ) { - setIsOpened(false); - } - }, - [setIsOpened] - ); - - useEffect(() => { - document.addEventListener('mousedown', handleVisibility); - document.addEventListener('focusin', handleVisibility); - - return () => { - document.removeEventListener('mousedown', handleVisibility); - document.removeEventListener('focusin', handleVisibility); - }; - }, [handleVisibility]); const mainNavConfig: NavItem[] = [ { @@ -122,7 +102,7 @@ const MainNav = ({ }); return ( - <div ref={mainNavRef} className={styles.wrapper}> + <div id="main-nav" ref={ref} className={styles.wrapper}> <input type="checkbox" name="main-nav__checkbox" @@ -164,4 +144,4 @@ const MainNav = ({ ); }; -export default MainNav; +export default forwardRef(MainNav); |
