[overlayMenu] add component

package-lock.json

@@ -1510,6 +1510,12 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
+      "dev": true
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "@babel/preset-env": "^7.0.0",
     "@mightyplow/jslib": "^0.21.0",
     "babel-loader": "^8.0.2",
+    "classnames": "^2.2.6",
     "copy-webpack-plugin": "^4.5.2",
     "webpack": "^4.17.2",
     "webpack-cli": "^3.1.0"

src/index.js

@@ -3,3 +3,4 @@ export { dialogActions } from './dialog/dialogActions';
 export { dialogState } from './dialog/dialogState';
 
 export { Overlay } from './overlay/Overlay.jsx';
+export { OverlayMenu } from './overlayMenu/OverlayMenu.jsx';

src/overlayMenu/OverlayMenu.jsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+import style from './overlayMenu.css';
+
+function OverlayMenu ({renderMenu, className, ...props}, children) {
+    const composedClassName = cx(className, style.overlayMenu);
+
+    return (
+        <div className={composedClassName} {...props}>
+            <div className={style.menu}>
+                {renderMenu()}
+            </div>
+
+            <div className={style.content}>
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export {
+    OverlayMenu
+};

src/overlayMenu/overlayMenu.css

@@ -0,0 +1,21 @@
+.overlayMenu {
+    position: relative;
+}
+
+.menu {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+
+    background: rgba(220, 220, 220, .7);
+    opacity: 0;
+    transition: opacity .1s ease-in;
+}
+
+.overlayMenu:hover .menu {
+    opacity: 1;
+}
+
+.content {
+
+}