Overlay moved to separate component

src/components/Menu/Overlay.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react'
-
-export interface IOverlayProps {
-    show: boolean
-    onClickOverlay: () => void
-}
-
-export const Overlay: React.FC<IOverlayProps> = ({ children, ...props }) => {
-    const [mounted, setMounted] = React.useState(props.show)
-    const [opacity, setOpacity] = React.useState(0)
-    const onClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-        if (event.target === event.currentTarget) {
-            props.onClickOverlay()
-        }
-    }, [props.onClickOverlay])
-    const onTransitionEnd = React.useCallback(() => {
-        console.log('transition end', mounted, opacity)
-        if (opacity === 0) {
-            setMounted(false)
-        }
-    }, [opacity])
-
-    React.useEffect(() => {
-        if (!props.show) {
-            setOpacity(0)
-            return
-        }
-
-        setMounted(true)
-        let t = setTimeout(() => {
-            setOpacity(1)
-        }, 16)
-
-        return () => {
-            clearTimeout(t)
-        }
-    }, [props.show])
-
-    return mounted && (
-        <div
-            style={{
-                opacity,
-            }}
-            onClick={onClick}
-            onTransitionEnd={onTransitionEnd}
-        >
-            <style jsx>{`
-                div {
-                    position: fixed;
-                    width: 100%;
-                    height: 100%;
-                    top: 0;
-                    left: 0;
-                    z-index: 1000000;
-
-                    background-color: rgb(255, 255, 255);
-                    opacity: 0;
-
-                    transition: all 200ms;
-                }
-            `}</style>
-
-            {children}
-        </div>
-    )
-}

src/components/Menu/index.tsx

@@ -4,7 +4,7 @@ import { getPathWithNoTrailingSlash } from '../../lib/url'
 import { MenuToggle } from './MenuToggle'
 import { useScreenType } from '../../hooks/useScreenType'
 import { MenuItem } from './MenuItem'
-import { Overlay } from './Overlay'
+import { Overlay } from '../Overlay'
 
 const itemUrl = (url: string) => getPathWithNoTrailingSlash(url)