relocate PagePathNav into PageView

apps/app/src/components/Layout/BasicLayout.tsx

@@ -39,7 +39,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
         <div className="page-wrapper flex-row">
           <Sidebar />
 
-          <div className="flex-expand-vert">{/* neccessary for nested {children} make expanded */}
+          <div className="d-flex flex-grow-1 flex-column">{/* neccessary for nested {children} make expanded */}
             <AlertSiteUrlUndefined />
             {children}
           </div>

apps/app/src/components/Layout/PageViewLayout.tsx

@@ -4,19 +4,25 @@ import styles from './PageViewLayout.module.scss';
 
 type Props = {
   children?: ReactNode,
+  headerContents?: ReactNode,
   sideContents?: ReactNode,
   footerContents?: ReactNode,
 }
 
 export const PageViewLayout = (props: Props): JSX.Element => {
   const {
-    children, sideContents, footerContents,
+    children, headerContents, sideContents, footerContents,
   } = props;
 
   return (
     <>
       <div id="main" className={`main page-view-layout ${styles['page-view-layout']}`}>
         <div id="content-main" className="content-main container-lg grw-container-convertible">
+          { headerContents != null && (
+            <header className="sticky-top">
+              {headerContents}
+            </header>
+          ) }
           { sideContents != null
             ? (
               <div className="d-flex flex-column flex-column-reverse flex-lg-row">

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -36,7 +36,6 @@ import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
 import { NotAvailable } from '../NotAvailable';
-import PagePathNav from '../PagePathNav';
 import { Skeleton } from '../Skeleton';
 
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
@@ -382,15 +381,8 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
   };
 
 
-  const pagePath = isIdenticalPath || isNotFound
-    ? currentPathname ?? ''
-    : currentPage?.path ?? '';
-
   return (
-    <>
-      <RightComponent />
-      <PagePathNav pageId={pageId} pagePath={pagePath} />
-    </>
+    <RightComponent />
   );
 };
 

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

@@ -20,6 +20,7 @@ import type { CommentsProps } from '../Comments';
 import { PageViewLayout } from '../Layout/PageViewLayout';
 import { PageAlerts } from '../PageAlert/PageAlerts';
 import { PageContentFooter } from '../PageContentFooter';
+import { PagePathNav } from '../PagePathNav';
 import type { PageSideContentsProps } from '../PageSideContents';
 import { UserInfo } from '../User/UserInfo';
 import type { UsersHomepageFooterProps } from '../UsersHomepageFooter';
@@ -98,6 +99,10 @@ export const PageView = (props: Props): JSX.Element => {
     }
   }, [isForbidden, isIdenticalPathPage, isNotCreatable]);
 
+  const headerContents = (
+    <PagePathNav pageId={page?._id} pagePath={pagePath} />
+  );
+
   const sideContents = !isNotFound && !isNotCreatable
     ? (
       <PageSideContents page={page} />
@@ -141,6 +146,7 @@ export const PageView = (props: Props): JSX.Element => {
 
   return (
     <PageViewLayout
+      headerContents={headerContents}
       sideContents={sideContents}
       footerContents={footerContents}
     >

apps/app/src/components/PagePathNav.tsx

@@ -21,7 +21,7 @@ type Props = {
 
 const CopyDropdown = dynamic(() => import('./Page/CopyDropdown'), { ssr: false });
 
-const PagePathNav: FC<Props> = (props: Props) => {
+export const PagePathNav: FC<Props> = (props: Props) => {
   const {
     pageId, pagePath, isSingleLineMode, isCompactMode,
   } = props;
@@ -66,5 +66,3 @@ const PagePathNav: FC<Props> = (props: Props) => {
     </div>
   );
 };
-
-export default PagePathNav;

apps/app/src/components/ShareLinkPageView.tsx

@@ -13,6 +13,7 @@ import loggerFactory from '~/utils/logger';
 import { PageViewLayout } from './Layout/PageViewLayout';
 import RevisionRenderer from './Page/RevisionRenderer';
 import ShareLinkAlert from './Page/ShareLinkAlert';
+import { PagePathNav } from './PagePathNav';
 import type { PageSideContentsProps } from './PageSideContents';
 
 
@@ -51,6 +52,10 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
     }
   }, [disableLinkSharing, props.disableLinkSharing]);
 
+  const headerContents = (
+    <PagePathNav pageId={page?._id} pagePath={pagePath} />
+  );
+
   const sideContents = !isNotFound
     ? (
       <PageSideContents page={page} />
@@ -86,6 +91,7 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
 
   return (
     <PageViewLayout
+      headerContents={headerContents}
       sideContents={sideContents}
     >
       { specialContents }
@@ -99,6 +105,7 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
           ) }
           { !isNotFound && (
             <>
+              <PagePathNav pageId={page?._id} pagePath={pagePath} />
               <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
               <div className="mb-5">
                 <Contents />

apps/app/src/styles/_layout.scss

@@ -13,6 +13,7 @@
 
 .dynamic-layout-root {
   @extend %flex-expand-vert;
+  overflow-y: unset;
 }
 
 .dynamic-layout-root.growi-layout-fluid .grw-container-convertible {