feat: allow MenuBar to be hidden

The MenuBar is quite specific to the canonical version of the online Scratch
editor [1]. In RaspberryPiFoundation projects we want to make use of the
scratch-gui package without displaying the MenuBar.

The MenuBar can be hidden by passing in the `menuBarHidden` prop.

Since the height of the menu bar is hard-coded as a CSS variable, I've
had to override the height calculation for the body wrapper when the
menu bar is not visible. Ideally the height of the menu bar wouldn't be
hard-coded and this wouldn't be necessary.

We were unable to find an existing unit test for the Gui component and so we
have not added any test coverage around the new `menuBarHidden` prop.

[1]: https://scratch.mit.edu/projects/editor

Co-authored-by: James Mead <james.mead@gofreerange.com>

Author: sebjacobs

packages/scratch-gui/src/components/gui/gui.css

@@ -11,6 +11,10 @@
     background-color: $ui-primary;
 }
 
+.body-wrapper-without-menu-bar {
+    height: 100%;
+}
+
 .body-wrapper * {
     box-sizing: border-box;
 }

packages/scratch-gui/src/components/gui/gui.jsx

@@ -102,6 +102,7 @@ const GUIComponent = props => {
         loading,
         logo,
         manuallySaveThumbnails,
+        menuBarHidden,
         renderLogin,
         onClickAbout,
         onClickAccountNav,
@@ -176,6 +177,9 @@ const GUIComponent = props => {
 
     return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
         const stageSize = resolveStageSize(stageSizeMode, isFullSize);
+        const boxStyles = classNames(styles.bodyWrapper, {
+            [styles.bodyWrapperWithoutMenuBar]: menuBarHidden
+        });
 
         return isPlayerOnly ? (
             <StageWrapper
@@ -255,7 +259,7 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                <MenuBar
+                {!menuBarHidden && <MenuBar
                     accountNavOpen={accountNavOpen}
                     authorId={authorId}
                     authorThumbnailUrl={authorThumbnailUrl}
@@ -290,8 +294,8 @@ const GUIComponent = props => {
                     userOwnsProject={userOwnsProject}
                     username={username}
                     accountMenuOptions={accountMenuOptions}
-                />
-                <Box className={styles.bodyWrapper}>
+                />}
+                <Box className={boxStyles}>
                     <Box className={styles.flexWrapper}>
                         <Box className={styles.editorWrapper}>
                             <Tabs
@@ -465,6 +469,7 @@ GUIComponent.propTypes = {
     loading: PropTypes.bool,
     logo: PropTypes.string,
     manuallySaveThumbnails: PropTypes.bool,
+    menuBarHidden: PropTypes.bool,
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
@@ -527,6 +532,7 @@ GUIComponent.defaultProps = {
     isShared: false,
     isTotallyNormal: false,
     loading: false,
+    menuBarHidden: false,
     showComingSoon: false,
     stageSizeMode: STAGE_SIZE_MODES.large,
     useExternalPeripheralList: false