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/Buttons/Buttons.module.scss | 12 +++-----
 src/components/MainNav/MainNav.module.scss | 14 ++-------
 src/components/MainNav/MainNav.tsx         | 46 +++++++++---------------------
 src/components/Toolbar/Toolbar.tsx         | 28 ++++++++++++------
 4 files changed, 39 insertions(+), 61 deletions(-)

diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 2a6daca..0ea9289 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -177,7 +177,7 @@
 }
 
 .toolbar {
-  --draw-border-thickness: #{fun.convert-px(5)};
+  --draw-border-thickness: #{fun.convert-px(4)};
   --icon-size: 100%;
 
   display: flex;
@@ -198,15 +198,11 @@
     @extend %draw-borders;
   }
 
-  /*   @include mix.media("screen") {
+  @include mix.media("screen") {
     @include mix.dimensions("md") {
-      &:hover,
-      &:focus {
-        transform: rotate(360deg);
-        transition: all 0.8s ease-in-out 0s;
-      }
+      border-radius: 8%;
     }
-  } */
+  }
 }
 
 .icon {
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 3ced245..f3e6c10 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -37,12 +37,7 @@
   padding: var(--spacing-2xs);
 
   &:hover {
-    span,
-    span::before,
-    span::after {
-      background: var(--color-primary-lighter);
-      box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow);
-    }
+    @extend %draw-borders;
   }
 
   @include mix.media("screen") {
@@ -63,12 +58,7 @@
 
   &:hover {
     ~ .label {
-      span,
-      span::before,
-      span::after {
-        background: var(--color-primary-lighter);
-        box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow);
-      }
+      @extend %draw-borders;
     }
   }
 
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);
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 25418b1..7b28757 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -9,6 +9,7 @@ const Toolbar = () => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
   const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
+  const mainNavRef = useRef<HTMLDivElement>(null);
   const searchBtnRef = useRef<HTMLButtonElement>(null);
   const searchModalRef = useRef<HTMLDivElement>(null);
   const settingsBtnRef = useRef<HTMLButtonElement>(null);
@@ -39,16 +40,14 @@ const Toolbar = () => {
     ref: RefObject<HTMLDivElement>,
     target: EventTarget
   ) => {
-    const currentRef = ref.current;
-    return currentRef && !currentRef.contains(target as Node);
+    return ref.current && !ref.current.contains(target as Node);
   };
 
   const isToggleBtn = (ref: RefObject<HTMLDivElement>, target: EventTarget) => {
-    const currentRef = ref.current;
     return (
-      currentRef &&
-      currentRef.previousElementSibling &&
-      currentRef.previousElementSibling.contains(target as Node)
+      ref.current &&
+      ref.current.previousElementSibling &&
+      ref.current.previousElementSibling.contains(target as Node)
     );
   };
 
@@ -68,6 +67,7 @@ const Toolbar = () => {
   const handleVisibility = useCallback(
     (e: MouseEvent | FocusEvent) => {
       let ref: RefObject<HTMLDivElement> | null = null;
+      if (isNavOpened) ref = mainNavRef;
       if (isSearchOpened) ref = searchModalRef;
       if (isSettingsOpened) ref = settingsModalRef;
 
@@ -75,6 +75,14 @@ const Toolbar = () => {
       if (!isClickOutside(ref, e.target as Node)) return;
       if (isToggleBtn(ref, e.target as Node)) return;
 
+      if (
+        ref.current.id === 'main-nav' &&
+        !isSettingsBtn(e.target as HTMLElement) &&
+        !isSearchBtn(e.target as HTMLElement)
+      ) {
+        setIsNavOpened(false);
+      }
+
       if (
         ref.current.id === 'search-modal' &&
         !isSettingsBtn(e.target as HTMLElement)
@@ -86,7 +94,7 @@ const Toolbar = () => {
       )
         setIsSettingsOpened(false);
     },
-    [isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn]
+    [isNavOpened, isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn]
   );
 
   useEffect(() => {
@@ -109,7 +117,11 @@ const Toolbar = () => {
 
   return (
     <div className={styles.wrapper}>
-      <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
+      <MainNav
+        ref={mainNavRef}
+        isOpened={isNavOpened}
+        setIsOpened={setIsNavOpened}
+      />
       <ButtonToolbar
         ref={searchBtnRef}
         type="search"
-- 
cgit v1.2.3