Menu Overlay component added

src/components/Menu/Overlay.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+export interface IOverlayProps {
+    opacity: number
+    onClickOverlay: () => void
+}
+
+export const Overlay: React.FC<IOverlayProps> = props => {
+    const onClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        if (event.target === event.currentTarget) {
+            props.onClickOverlay()
+        }
+    }, [props.onClickOverlay])
+
+    return (
+        <div
+            style={{
+                opacity: props.opacity
+            }}
+            onClick={onClick}
+        >
+            <style jsx>{`
+                div {
+                    position: fixed;
+                    width: 100%;
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    z-index: 1000000;
+
+                    background-color: rgb(255, 255, 255);
+                }
+            `}</style>
+
+            {props.children}
+        </div>
+    )
+}

src/components/Menu/index.tsx

@@ -4,6 +4,7 @@ import { getPathWithNoTrailingSlash } from '../../lib/url'
 import { MenuToggle } from './MenuToggle'
 import { useScreenType } from '../../hooks/useScreenType'
 import { MenuItem } from './MenuItem'
+import { Overlay } from './Overlay'
 
 const itemUrl = (url: string) => getPathWithNoTrailingSlash(url)
 
@@ -96,6 +97,28 @@ export const Menu: React.FC<IMenuProps> = props => {
                     />
                 </li>
             ))}
+
+            {!open ? null : (
+                <Overlay
+                    opacity={1}
+                    onClickOverlay={onClick}
+                >
+                    {props.items.map((item, index) => (
+                        <li key={index}
+                            className={cx(
+                                item.color, {
+                                selected: item.highlighted,
+                            })}
+                        >
+                            <MenuItem
+                                url={itemUrl(item.url)}
+                                text={item.text}
+                                active={item.active}
+                            />
+                        </li>
+                    ))}
+                </Overlay>
+            )}
         </menu>
     )
 }