use pageAcceessoriesModalControl and PageAccessoriesModal

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -3,24 +3,58 @@ import { TabContent, TabPane } from 'reactstrap';
 import propTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
+import AppContainer from '../../services/AppContainer';
+import PageAccessoriesContainer from '../../services/PageAccessoriesContainer';
 import Editor from '../PageEditor';
 import Page from '../Page';
-import PageAccessories from '../PageAccessories';
+import TableOfContents from '../TableOfContents';
+import PageAccessoriesModalControl from '../PageAccessoriesModalControl';
+import PageAccessoriesModal from '../PageAccessoriesModal';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 
 
 const DisplaySwitcher = (props) => {
-  const { navigationContainer } = props;
-  const { editorMode } = navigationContainer.state;
+  const { navigationContainer, appContainer, pageAccessoriesContainer } = props;
+  const { editorMode, isDeviceSmallerThanMd } = navigationContainer.state;
+  const { isGuestUser, isSharedUser } = appContainer;
+  const { closePageAccessoriesModal } = pageAccessoriesContainer;
+  const { isPageAccessoriesModalShown } = pageAccessoriesContainer.state;
 
   return (
     <>
       <TabContent activeTab={editorMode}>
         <TabPane tabId="view">
-          <div className="d-flex d-lg-none justify-content-end border-bottom">
-            <PageAccessories />
-          </div>
+          {(isDeviceSmallerThanMd) ? (
+            <div className="d-flex d-lg-none justify-content-end border-bottom">
+              <PageAccessoriesModalControl
+                isGuestUser={isGuestUser}
+                isSharedUser={isSharedUser}
+              />
+            </div>
+           ) : (
+             <div className="d-edit-none grw-side-contents-container">
+               <div className="grw-side-contents-sticky-container">
+                 <div className="page-accessories">
+                   <PageAccessoriesModalControl
+                     isGuestUser={isGuestUser}
+                     isSharedUser={isSharedUser}
+                   />
+                 </div>
+                 <div className="revision-toc sps sps--sbv" data-sps-offset="123">
+                   <TableOfContents />
+                 </div>
+               </div>
+             </div>
+
+
+         )}
+          <PageAccessoriesModal
+            isGuestUser={isGuestUser}
+            isSharedUser={isSharedUser}
+            isOpen={isPageAccessoriesModalShown}
+            onClose={closePageAccessoriesModal}
+          />
           <Page />
         </TabPane>
         <TabPane tabId="edit">
@@ -41,7 +75,9 @@ const DisplaySwitcher = (props) => {
 
 DisplaySwitcher.propTypes = {
   navigationContainer: propTypes.instanceOf(NavigationContainer).isRequired,
+  appContainer: propTypes.instanceOf(AppContainer).isRequired,
+  pageAccessoriesContainer: propTypes.instanceOf(PageAccessoriesContainer).isRequired,
 };
 
 
-export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer]);
+export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer, AppContainer, PageAccessoriesContainer]);

src/client/js/components/PageAccessories.jsx

@@ -14,7 +14,10 @@ const PageAccessories = (props) => {
 
   return (
     <>
-      <PageAccessoriesModalControl isGuestUser={isGuestUser} isSharedUser={isSharedUser} />
+      <PageAccessoriesModalControl
+        isGuestUser={isGuestUser}
+        isSharedUser={isSharedUser}
+      />
       <PageAccessoriesModal
         isGuestUser={isGuestUser}
         isSharedUser={isSharedUser}

src/server/views/widget/page_content.html

@@ -53,7 +53,7 @@
   <div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
 </div>
 
-{% if revision %}
+<!-- {% if revision %}
 <div class="d-none d-lg-block d-edit-none grw-side-contents-container">
   <div class="grw-side-contents-sticky-container">
     <div id="page-accessories" class="page-accessories"></div>
@@ -63,7 +63,7 @@
     {% endif %}
   </div>
 </div>
-{% endif %}
+{% endif %} -->
 
 
 <div id="grw-page-status-alert-container"></div>