create PagePathNavSticky

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -3,12 +3,17 @@ import React, { FC } from 'react';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { pagePathUtils } from '@growi/core/dist/utils';
 import dynamic from 'next/dynamic';
+import Sticky from 'react-stickynode';
 
 import { useIsNotFound } from '~/stores/page';
 
 import LinkedPagePath from '../../../models/linked-page-path';
 import { PagePathHierarchicalLink } from '../PagePathHierarchicalLink';
 
+
+import styles from './PagePathNav.module.scss';
+
+
 const { isTrashPage } = pagePathUtils;
 
 type Props = {
@@ -65,3 +70,17 @@ export const PagePathNav: FC<Props> = (props: Props) => {
     </div>
   );
 };
+
+
+type PagePathNavStickyProps = Omit<Props, 'isCollapseParents'>;
+
+export const PagePathNavSticky = (props: PagePathNavStickyProps): JSX.Element => {
+  return (
+    <Sticky className={styles['grw-page-path-nav-sticky']}>
+      {({ status }: { status: boolean }) => {
+        const isCollapseParents = status === Sticky.STATUS_FIXED;
+        return <PagePathNav {...props} isCollapseParents={isCollapseParents} />;
+      }}
+    </Sticky>
+  );
+};

apps/app/src/components/Page/PageView.tsx

@@ -5,7 +5,6 @@ import React, {
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { isUsersHomepage } from '@growi/core/dist/utils/page-path-utils';
 import dynamic from 'next/dynamic';
-import Sticky from 'react-stickynode';
 
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import { generateSSRViewOptions } from '~/services/renderer/renderer';
@@ -18,7 +17,7 @@ import { useIsMobile } from '~/stores/ui';
 
 
 import type { CommentsProps } from '../Comments';
-import { PagePathNav } from '../Common/PagePathNav';
+import { PagePathNavSticky } from '../Common/PagePathNav';
 import { PageViewLayout } from '../Layout/PageViewLayout';
 import { PageAlerts } from '../PageAlert/PageAlerts';
 import { PageContentFooter } from '../PageContentFooter';
@@ -101,12 +100,7 @@ export const PageView = (props: Props): JSX.Element => {
   }, [isForbidden, isIdenticalPathPage, isNotCreatable]);
 
   const headerContents = (
-    <Sticky>
-      {({ status }: { status: boolean }) => {
-        const isCollapseParents = status === Sticky.STATUS_FIXED;
-        return <PagePathNav pageId={page?._id} pagePath={pagePath} isCollapseParents={isCollapseParents} />;
-      }}
-    </Sticky>
+    <PagePathNavSticky pageId={page?._id} pagePath={pagePath} />
   );
 
   const sideContents = !isNotFound && !isNotCreatable

apps/app/src/components/ShareLinkPageView.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import dynamic from 'next/dynamic';
-import Sticky from 'react-stickynode';
 
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { IShareLinkHasId } from '~/interfaces/share-link';
@@ -11,11 +10,10 @@ import { useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
 
-import { PagePathNav } from './Common/PagePathNav';
+import { PagePathNavSticky } from './Common/PagePathNav';
 import { PageViewLayout } from './Layout/PageViewLayout';
 import RevisionRenderer from './Page/RevisionRenderer';
 import ShareLinkAlert from './Page/ShareLinkAlert';
-import { PagePathNav } from './PagePathNav';
 import type { PageSideContentsProps } from './PageSideContents';
 
 
@@ -55,12 +53,7 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
   }, [disableLinkSharing, props.disableLinkSharing]);
 
   const headerContents = (
-    <Sticky>
-      {({ status }: { status: boolean }) => {
-        const isCollapseParents = status === Sticky.STATUS_FIXED;
-        return <PagePathNav pageId={page?._id} pagePath={pagePath} isCollapseParents={isCollapseParents} />;
-      }}
-    </Sticky>
+    <PagePathNavSticky pageId={page?._id} pagePath={pagePath} />
   );
 
   const sideContents = !isNotFound