implemented so that the when you press the "edit" mode the style will maintain the same

src/client/js/components/NotFoundPage.jsx

@@ -6,10 +6,13 @@ import TimeLineIcon from './Icons/TimeLineIcon';
 import CustomNavigation from './CustomNavigation';
 import PageList from './PageList';
 import PageTimeline from './PageTimeline';
+import { withUnstatedContainers } from './UnstatedUtils';
+import NavigationContainer from '../services/NavigationContainer';
 
 
 const NotFoundPage = (props) => {
-  const { t } = props;
+  const { t, navigationContainer } = props;
+  const { editorMode } = navigationContainer.state;
 
   const navTabMapping = {
     pagelist: {
@@ -26,15 +29,24 @@ const NotFoundPage = (props) => {
     },
   };
 
-  return (
-    <div className="grw-custom-navigation mt-5">
-      <CustomNavigation navTabMapping={navTabMapping} />
-    </div>
-  );
+  if (editorMode === 'view') {
+    return (
+      <div className="grw-custom-navigation mt-5">
+        <CustomNavigation navTabMapping={navTabMapping} />
+      </div>
+    );
+  }
+  return null;
 };
 
+/**
+ * Wrapper component for using unstated
+ */
+const NotFoundPageWrapper = withUnstatedContainers(NotFoundPage, [NavigationContainer]);
+
 NotFoundPage.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-export default withTranslation()(NotFoundPage);
+export default withTranslation()(NotFoundPageWrapper);

src/server/views/widget/not_found_content.html

@@ -5,11 +5,8 @@
     data-template-tags="{{ templateTags }}"
   {% endif %}
   >
-
   <div id="display-switcher"></div>
-  <div id="not-found-alert"></div>
   <div id="not-found-page"></div>
-
   <div class="tab-content">
 
 

src/server/views/widget/page_alerts.html

@@ -80,5 +80,8 @@
     {% if isTrashPage() %}
       <div id="trash-page-alert"></div>
     {% endif %}
+    {% if !page %}
+      <div id="not-found-alert"></div>
+    {% endif %}
   </div>
 </div>