PagePathNav -> PagePathHierarchicalLink

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

@@ -473,7 +473,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="justify-content-center ms-3 mt-3">
+      <div className="justify-content-center ms-3 mt-2">
         <PageHeader />
       </div>
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>

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

@@ -5,10 +5,11 @@ import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 
 import { ValidationTarget } from '~/client/util/input-validator';
+import LinkedPagePath from '~/models/linked-page-path';
 import { usePageSelectModal } from '~/stores/modal';
 
 import ClosableTextInput from '../Common/ClosableTextInput';
-import { PagePathNav } from '../Common/PagePathNav';
+import { PagePathHierarchicalLink } from '../Common/PagePathHierarchicalLink';
 import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
 
 import { usePagePathRenameHandler } from './page-header-utils';
@@ -22,6 +23,7 @@ export const PagePathHeader: FC<Props> = (props) => {
   const { currentPage } = props;
 
   const currentPagePath = currentPage.path;
+  const linkedPagePath = new LinkedPagePath(currentPagePath);
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isButtonsShown, setButtonShown] = useState(false);
@@ -106,13 +108,7 @@ export const PagePathHeader: FC<Props> = (props) => {
                 />
               </div>
             ) : (
-              <div className="">
-                <PagePathNav
-                  pageId={currentPage._id}
-                  pagePath={currentPagePath}
-                  isSingleLineMode
-                />
-              </div>
+              <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
             )}
         </div>