add onMounseEnter, onMouseLeave props

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -565,7 +565,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   return (
     <div data-testid="page-editor" id="page-editor" className={`flex-expand-vert ${props.visibility ? '' : 'd-none'}`}>
-      <div className="flex-expand-vert justify-content-center align-items-center" style={{ minHeight: '72px' }}>
+      <div className="flex-expand-vert justify-content-center align-items-center pull-left" style={{ minHeight: '72px' }}>
         <PageHeader />
       </div>
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -15,7 +15,7 @@ export const PageHeader: FC = () => {
 
   return (
     <>
-      <div className="pull-left">
+      <div>
         <PagePath
           currentPagePath={currentPagePath}
           currentPage={currentPage}

apps/app/src/components/PageHeader/PagePath.tsx

@@ -2,8 +2,11 @@ import { FC, useState } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 
+import { usePageSelectModal } from '~/stores/modal';
+
 import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
 
+
 type Props = {
   currentPagePath: string
   currentPage: IPagePopulatedToShowRevision
@@ -15,6 +18,8 @@ export const PagePath: FC<Props> = (props) => {
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isButtonsShown, setButtonShown] = useState(false);
 
+  const { open: openPageSelectModal, close: closePageSelectModal } = usePageSelectModal();
+
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
   return (
@@ -23,8 +28,8 @@ export const PagePath: FC<Props> = (props) => {
         <div className="row">
           <div
             className="col-4"
-            // onMouseEnter={setButtonShown(true)}
-            // onMouseLeave={setButtonShown(false)}
+            onMouseEnter={() => setButtonShown(true)}
+            onMouseLeave={() => setButtonShown(false)}
           >
             <TextInputForPageTitleAndPath
               currentPagePath={currentPagePath}
@@ -40,7 +45,7 @@ export const PagePath: FC<Props> = (props) => {
                 <button type="button">編集ボタン</button>
               </div>
               <div className="col-4">
-                <button type="button">ページツリーボタン</button>
+                <button type="button" onClick={openPageSelectModal}>ページツリーボタン</button>
               </div>
             </>
           )}