fix(client): make top navigation menu replaceable (#35943)

* fix(client): Stop using react-responsive and use media queries to display menu

* Change guide to show menu

* DRYed out a bit

* Restore main, top-right nav to guide

* fix: Separate guide and top menu state

* Update client/src/components/Header/index.js

Co-Authored-By: Valeriy <ValeraS@users.noreply.github.com>

* Update client/src/components/Header/index.js

Co-Authored-By: Valeriy <ValeraS@users.noreply.github.com>

* Update client/src/components/Header/index.js

Co-Authored-By: Valeriy <ValeraS@users.noreply.github.com>

* Update client/src/components/Header/index.js

Co-Authored-By: Valeriy <ValeraS@users.noreply.github.com>

* fix: Refactor menu button and links

* feat(client): make top navigation menu replaceable

* fix: Refactor nav menu logic out of Header

* fix(client): use default nav menu in header and use landingPage props instead of disableSettings

client/src/components/layouts/Default.js

@@ -56,8 +56,6 @@ const metaKeywords = [
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  disableMenuButtonBehavior: PropTypes.bool,
-  disableSettings: PropTypes.bool,
   fetchUser: PropTypes.func.isRequired,
   flashMessages: PropTypes.arrayOf(
     PropTypes.shape({
@@ -70,7 +68,7 @@ const propTypes = {
   isOnline: PropTypes.bool.isRequired,
   isSignedIn: PropTypes.bool,
   landingPage: PropTypes.bool,
-  mediaBreakpoint: PropTypes.string,
+  navigationMenu: PropTypes.element.isRequired,
   onlineStatusChange: PropTypes.func.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
   showFooter: PropTypes.bool
@@ -136,14 +134,12 @@ class DefaultLayout extends Component {
   render() {
     const {
       children,
-      disableSettings,
       hasMessages,
       flashMessages = [],
       removeFlashMessage,
       landingPage,
       showFooter = true,
-      mediaBreakpoint,
-      disableMenuButtonBehavior,
+      navigationMenu,
       isOnline,
       isSignedIn
     } = this.props;
@@ -162,11 +158,7 @@ class DefaultLayout extends Component {
         >
           <style>{fontawesome.dom.css()}</style>
         </Helmet>
-        <Header
-          disableMenuButtonBehavior={disableMenuButtonBehavior}
-          disableSettings={disableSettings}
-          mediaBreakpoint={mediaBreakpoint}
-        />
+        <Header disableSettings={landingPage} navigationMenu={navigationMenu} />
         <div className={`default-layout ${landingPage ? 'landing-page' : ''}`}>
           <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
           {hasMessages ? (