Clean up menu positioning

src/components/menu-bar/menu-bar.css

@@ -53,6 +53,7 @@
 .menu {
     /* blocklyToolboxDiv is 40 */
     z-index: 50;
+    top: 31px;
 }
 
 .menu-bar-item {

src/components/menu-bar/menu-bar.jsx

@@ -23,7 +23,7 @@ import communityIcon from './icon--see-community.svg';
 import dropdownCaret from '../language-selector/dropdown-caret.svg';
 import scratchLogo from './scratch-logo.svg';
 
-const MenuBarItemTooltip = ({id, place="bottom", children}) => (
+const MenuBarItemTooltip = ({id, place = 'bottom', children}) => (
     <ComingSoonTooltip
         className={styles.comingSoon}
         place={place}
@@ -40,6 +40,45 @@ MenuBarItemTooltip.propTypes = {
     place: PropTypes.oneOf(['top', 'bottom', 'left', 'right'])
 };
 
+const MenuItemTooltip = ({id, children}) => (
+    <ComingSoonTooltip
+        className={styles.comingSoon}
+        place="right"
+        tooltipClassName={styles.comingSoonTooltip}
+        tooltipId={id}
+    >
+        {children}
+    </ComingSoonTooltip>
+);
+
+MenuItemTooltip.propTypes = {
+    children: PropTypes.node,
+    id: PropTypes.string
+};
+
+const MenuBarMenu = ({
+    children,
+    onRequestClose,
+    open,
+    place = 'right'
+}) => (
+    <Menu
+        className={styles.menu}
+        open={open}
+        place={place}
+        onRequestClose={onRequestClose}
+    >
+        {children}
+    </Menu>
+);
+
+MenuBarMenu.propTypes = {
+    children: PropTypes.node,
+    onRequestClose: PropTypes.func,
+    open: PropTypes.bool,
+    place: PropTypes.oneOf(['left', 'right'])
+};
+
 const MenuBar = props => (
     <Box className={styles.menuBar}>
         <div className={styles.mainMenu}>
@@ -65,17 +104,22 @@ const MenuBar = props => (
                     onMouseUp={props.onClickFile}
                 >
                     <div className={classNames(styles.fileMenu)}>File</div>
-                    <Menu
-                        className={styles.menu}
+                    <MenuBarMenu
                         open={props.fileMenuOpen}
                         onRequestClose={props.onRequestCloseFile}
                     >
-                        <MenuItem>New</MenuItem>
-                        <MenuItem>Save now</MenuItem>
-                        <MenuItem>Save as a copy</MenuItem>
+                        <MenuItemTooltip id="new">
+                            <MenuItem>New</MenuItem>
+                        </MenuItemTooltip>
+                        <MenuItemTooltip id="save">
+                            <MenuItem>Save now</MenuItem>
+                        </MenuItemTooltip>
+                        <MenuItemTooltip id="copy">
+                            <MenuItem>Save as a copy</MenuItem>
+                        </MenuItemTooltip>
                         <MenuItem>Upload from your computer</MenuItem>
                         <MenuItem>Download to your computer</MenuItem>
-                    </Menu>
+                    </MenuBarMenu>
                 </div>
                 <div className={classNames(styles.menuBarItem)}>
                     <MenuBarItemTooltip id="edit-menu">

src/components/menu/menu.css

@@ -2,42 +2,28 @@
 
 .menu {
     position: absolute;
-    right: 0;
     border: 1px solid $ui-black-transparent;
-    border-radius: 0 0 5px 5px;
+    border-radius: 0 0 4px 4px;
     background-color: $motion-primary;
     padding: 10px;
     max-width: 260px;
     overflow: visible;
     color: $ui-white;
-    font-size: .8125rem;
     font-weight: normal;
+    margin: 0;
 }
 
-/*
-a {
-    &:link,
-    &:visited,
-    &:active {
-        background-color: transparent;
-        color: $ui-white;
-    }
+.menu.left {
+    right: 0;
 }
 
-input {
-    // 100% minus border and padding
-    margin-bottom: 12px;
-    width: calc(100% - 30px);
+.menu.right {
+    left: 0;
 }
 
-label {
-    display: block;
-    margin-bottom: 5px;
-}
-*/
 .menu-item {
     display: block;
-    line-height: 30px;
+    line-height: 34px;
     white-space: nowrap;
 }
 
@@ -46,17 +32,6 @@ label {
     border-top: 1px solid $ui-black-transparent;
 }
 
-/*    a {
-        display: block;
-        padding: 0 10px;
-
-        &:hover {
-            background-color: $ui-black-transparent;
-            text-decoration: none;
-        }
-    }
-*/
-
 $arrow-border-width: 14px;
 .with-arrow {
     margin-top: $arrow-border-width;
@@ -82,9 +57,3 @@ $arrow-border-width: 14px;
 
     content: "";
 }
-
-/*
-@media only screen and (max-width: $tablet - 1) {
-    min-width: 160px;
-}
-*/

src/components/menu/menu.jsx

@@ -5,10 +5,11 @@ import React from 'react';
 import styles from './menu.css';
 
 const MenuComponent = ({
-    open = false,
-    children,
     className = '',
-    componentRef
+    children,
+    componentRef,
+    open = false,
+    place = 'right'
 }) => {
     if (open) {
         return (
@@ -17,7 +18,9 @@ const MenuComponent = ({
                     styles.menu,
                     className,
                     {
-                        [styles.open]: open
+                        [styles.open]: open,
+                        [styles.left]: place === 'left',
+                        [styles.right]: place === 'right'
                     }
                 )}
                 ref={componentRef}
@@ -33,7 +36,8 @@ MenuComponent.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     componentRef: PropTypes.func,
-    open: PropTypes.bool
+    open: PropTypes.bool,
+    place: PropTypes.oneOf(['left', 'right'])
 };
 
 const MenuItem = ({