From 68d93a6310938f5dda378e9185cdfb0086f90de8 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 14 Feb 2022 16:27:14 +0100
Subject: fix: open toolbar menu without double click

When the main nav was opened, a double click on the search button or
the settings button was necessary to open a new menu. Now, it works as
expected: the main nav is closed and the menu is opened in one click.
---
 src/components/MainNav/MainNav.tsx | 46 +++++++++++---------------------------
 1 file changed, 13 insertions(+), 33 deletions(-)

(limited to 'src/components/MainNav/MainNav.tsx')

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);
-- 
cgit v1.2.3