use isDeviceSmallerThanMd

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -88,12 +88,12 @@ const GrowiSubNavigation = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
   } = props;
-  const { isDrawerMode, editorMode } = navigationContainer.state;
+  const { isDrawerMode, editorMode, isDeviceSmallerThanMd } = navigationContainer.state;
   const {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor, isPageExist,
   } = pageContainer.state;
 
-  const { isGuestUser, isMobile } = appContainer;
+  const { isGuestUser } = appContainer;
   const isEditorMode = editorMode !== 'view';
   // Tags cannot be edited while the new page and editorMode is view
   const isTagLabelHidden = (editorMode !== 'edit' && !isPageExist);
@@ -137,7 +137,7 @@ const GrowiSubNavigation = (props) => {
                 onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
                 isBtnDisabled={isGuestUser}
                 editorMode={editorMode}
-                isMobile={isMobile}
+                isDeviceSmallerThanMd={isDeviceSmallerThanMd}
               />
             )}
           </div>

src/client/js/components/Navbar/PageEditorModeManager.jsx

@@ -29,7 +29,7 @@ const PageEditorModeButtonWrapper = React.memo(({
 
 function PageEditorModeManager(props) {
   const {
-    t, editorMode, onThreeStrandedButtonClicked, isBtnDisabled, isMobile,
+    t, editorMode, onThreeStrandedButtonClicked, isBtnDisabled, isDeviceSmallerThanMd,
   } = props;
 
 
@@ -50,7 +50,7 @@ function PageEditorModeManager(props) {
         aria-label="three-stranded-button"
         id="grw-three-stranded-button"
       >
-        {(!isMobile || editorMode !== 'view') && (
+        {(!isDeviceSmallerThanMd || editorMode !== 'view') && (
           <PageEditorModeButtonWrapper
             editorMode={editorMode}
             isBtnDisabled={isBtnDisabled}
@@ -61,7 +61,7 @@ function PageEditorModeManager(props) {
             { t('view') }
           </PageEditorModeButtonWrapper>
         )}
-        {(!isMobile || editorMode === 'view') && (
+        {(!isDeviceSmallerThanMd || editorMode === 'view') && (
           <PageEditorModeButtonWrapper
             editorMode={editorMode}
             isBtnDisabled={isBtnDisabled}
@@ -72,7 +72,7 @@ function PageEditorModeManager(props) {
             { t('Edit') }
           </PageEditorModeButtonWrapper>
         )}
-        {(!isMobile || editorMode === 'view') && (
+        {(!isDeviceSmallerThanMd || editorMode === 'view') && (
           <PageEditorModeButtonWrapper
             editorMode={editorMode}
             isBtnDisabled={isBtnDisabled}
@@ -99,12 +99,12 @@ PageEditorModeManager.propTypes = {
   onThreeStrandedButtonClicked: PropTypes.func,
   isBtnDisabled: PropTypes.bool,
   editorMode: PropTypes.string,
-  isMobile: PropTypes.bool,
+  isDeviceSmallerThanMd: PropTypes.bool,
 };
 
 PageEditorModeManager.defaultProps = {
   isBtnDisabled: false,
-  isMobile: false,
+  isDeviceSmallerThanMd: false,
 };
 
 export default withTranslation()(PageEditorModeManager);