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.

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.

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

Co-authored-by: James Mead <[email protected]>

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

@@ -101,6 +101,7 @@ const GUIComponent = props => {
         isTotallyNormal,
         loading,
         logo,
+        menuBarHidden,
         renderLogin,
         onClickAbout,
         onClickAccountNav,
@@ -174,6 +175,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
@@ -248,7 +252,7 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                <MenuBar
+                {!menuBarHidden && <MenuBar
                     accountNavOpen={accountNavOpen}
                     authorId={authorId}
                     authorThumbnailUrl={authorThumbnailUrl}
@@ -283,8 +287,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
@@ -457,6 +461,7 @@ GUIComponent.propTypes = {
     isTotallyNormal: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
+    menuBarHidden: PropTypes.bool,
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
@@ -518,6 +523,7 @@ GUIComponent.defaultProps = {
     isShared: false,
     isTotallyNormal: false,
     loading: false,
+    menuBarHidden: false,
     showComingSoon: false,
     stageSizeMode: STAGE_SIZE_MODES.large,
     useExternalPeripheralList: false