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>
         </>
     )
 }

src/components/Overlay/index.tsx

@@ -2,30 +2,20 @@ import s from "./styles.module.css"
 
 import { Transition } from "./Transition"
 import { useReducedMotion } from "../../hooks/useReducedMotion"
-import { useCallback, useEffect } from "react"
+import { useLockBodyScroll } from "react-use"
 
-export interface IOverlayProps {
+export type OverlayProps = {
     show: boolean
     onClickOverlay: () => void
     style?: React.CSSProperties
+    duration: number
 }
 
-export const Overlay: React.FC<IOverlayProps> = props => {
+export const Overlay: React.FC<OverlayProps> = props => {
     const motionDisabled = useReducedMotion()
-    const onClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-        if (event.target === event.currentTarget) {
-            props.onClickOverlay()
-        }
-    }, [props.onClickOverlay])
-    const duration = motionDisabled ? 0 : 250
+    const duration = motionDisabled ? 0 : props.duration
 
-    useEffect(() => {
-        if (props.show) {
-            document.body.classList.add("noscroll")
-        } else {
-            document.body.classList.remove("noscroll")
-        }
-    }, [props.show])
+    useLockBodyScroll(props.show)
 
     return (
         <Transition
@@ -33,7 +23,11 @@ export const Overlay: React.FC<IOverlayProps> = props => {
             show={props.show}
         >
             <div
-                onClick={onClick}
+                onClick={(event) => {
+                    if (event.target === event.currentTarget) {
+                        props.onClickOverlay()
+                    }
+                }}
                 className={s.overlay}
                 style={props.style}
             >

src/style/style.css

@@ -136,10 +136,6 @@ a.invisible {
     border-bottom-color: var(--color-text-opposite);
 }
 
-.noscroll {
-    overflow: hidden;
-}
-
 
 /* RC TOOLTIP OVERRIDE */
 .hudozka.rc-tooltip {