overlay and navigation changes

src/components/Navigation/index.tsx

@@ -2,10 +2,11 @@ import { MenuToggle } from "../MenuToggle"
 import { useMobile } from "src/hooks/useMobile"
 import { Menu } from "../Menu"
 import { Overlay } from "../Overlay"
-import { useState, useCallback, useContext } from "react"
+import { useContext } from "react"
 import { ConfigContext } from "src/context/ConfigContext"
 import { Block } from "../Block"
 import { Spacer } from "../Spacer"
+import { useToggle } from "react-use"
 
 export interface INavigationProps {
     style?: React.CSSProperties
@@ -13,26 +14,32 @@ export interface INavigationProps {
 
 export const Navigation: React.FC<INavigationProps> = props => {
     const collapseMenu = useMobile()
-    const [open, setOpen] = useState(false)
-    const onClick = useCallback(
-        () => {
-            setOpen(!open)
-        },
-        [open]
-    )
+    const [open, toggleOpen] = useToggle(false)
     const { menu } = useContext(ConfigContext)
 
+    if (!collapseMenu) {
+        return (
+            <nav style={props.style}>
+                <Menu
+                    layout={"desktop"}
+                    items={menu}
+                />
+            </nav>
+        )
+    }
+
     return (
         <>
             <Overlay
                 show={open}
-                onClickOverlay={onClick}
+                onClickOverlay={toggleOpen}
+                duration={250}
             >
                 <Block direction={"horizontal"}>
                     <Spacer />
                     <MenuToggle
                         open={open}
-                        onClick={onClick}
+                        onClick={toggleOpen}
                         style={{
                             margin: "var(--size-xs)",
                         }}
@@ -52,25 +59,16 @@ export const Navigation: React.FC<INavigationProps> = props => {
                 </Block>
             </Overlay>
 
-            {collapseMenu ? (
-                <Block direction={"horizontal"}>
-                    <Spacer />
-                    <MenuToggle
-                        open={open}
-                        onClick={onClick}
-                        style={{
-                            margin: "var(--size-xs)",
-                        }}
-                    />
-                </Block>
-            ) : (
-                <nav style={props.style}>
-                    <Menu
-                        layout={"desktop"}
-                        items={menu}
-                    />
-                </nav>
-            )}
+            <Block direction={"horizontal"}>
+                <Spacer />
+                <MenuToggle
+                    open={open}
+                    onClick={toggleOpen}
+                    style={{
+                        margin: "var(--size-xs)",
+                    }}
+                />
+            </Block>
         </>
     )
 }