Sticky GrowiContextualSubNavigation

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

@@ -162,11 +162,12 @@ const CreateTemplateMenuItems = (props: CreateTemplateMenuItemsProps): JSX.Eleme
 type GrowiContextualSubNavigationProps = {
   currentPage?: IPagePopulatedToShowRevision | null,
   isLinkSharingDisabled?: boolean,
+  isCollapse?: boolean,
 };
 
 const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps): JSX.Element => {
 
-  const { currentPage } = props;
+  const { currentPage, isCollapse } = props;
 
   const { t } = useTranslation();
 
@@ -308,6 +309,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
             onClickRenameMenuItem={renameItemClickedHandler}
             onClickDeleteMenuItem={deleteItemClickedHandler}
             onClickSwitchContentWidth={switchContentWidthHandler}
+            isCollapse={isCollapse}
           />
         )}
 

apps/app/src/components/PageControls/PageControls.tsx

@@ -112,6 +112,7 @@ type PageControlsSubstanceProps = CommonProps & {
   pageInfo: IPageInfoForOperation,
   expandContentWidth?: boolean,
   onClickEditTagsButton: () => void,
+  isCollapse?: boolean,
 }
 
 const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element => {
@@ -120,6 +121,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     pageId, revisionId, path, shareLinkId, expandContentWidth,
     disableSeenUserInfoPopover, showPageControlDropdown, forceHideMenuItems, additionalMenuItemRenderer,
     onClickEditTagsButton, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
+    isCollapse,
   } = props;
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -250,24 +252,25 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
   ];
 
   const isViewMode = editorMode === EditorMode.View;
+  const isDeviceIsSp = isDeviceLargerThanMd || !isCollapse;
 
   return (
     <div className={`grw-page-controls ${styles['grw-page-controls']} d-flex`} style={{ gap: '2px' }}>
       { isDeviceLargerThanMd && (
         <SearchButton />
       )}
-      {revisionId != null && !isViewMode && (
+      { revisionId != null && !isViewMode && (
         <Tags
           onClickEditTagsButton={onClickEditTagsButton}
         />
       )}
-      {revisionId != null && (
+      { isDeviceIsSp && revisionId != null && (
         <SubscribeButton
           status={pageInfo.subscriptionStatus}
           onClick={subscribeClickhandler}
         />
       )}
-      {revisionId != null && (
+      {isDeviceIsSp && revisionId != null && (
         <LikeButtons
           onLikeClicked={likeClickhandler}
           sumOfLikers={sumOfLikers}
@@ -275,14 +278,14 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
           likers={likers}
         />
       )}
-      {revisionId != null && (
+      {isDeviceIsSp && revisionId != null && (
         <BookmarkButtons
           pageId={pageId}
           isBookmarked={pageInfo.isBookmarked}
           bookmarkCount={pageInfo.bookmarkCount}
         />
       )}
-      {revisionId != null && (
+      {isDeviceIsSp && revisionId != null && (
         <SeenUserInfo
           seenUsers={seenUsers}
           sumOfSeenUsers={sumOfSeenUsers}

apps/app/src/pages/[[...path]].page.tsx

@@ -19,6 +19,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Sticky from 'react-stickynode';
 import superjson from 'superjson';
 
 import { useEditorModeClassName } from '~/client/services/layout';
@@ -118,13 +119,14 @@ superjson.registerCustom<IPageToShowRevisionWithMeta, IPageToShowRevisionWithMet
 // GrowiContextualSubNavigation for NOT shared page
 type GrowiContextualSubNavigationProps = {
   isLinkSharingDisabled: boolean,
+  isCollapse: boolean,
 }
 
 const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps): JSX.Element => {
-  const { isLinkSharingDisabled } = props;
+  const { isLinkSharingDisabled, isCollapse } = props;
   const { data: currentPage } = useSWRxCurrentPage();
   return (
-    <GrowiContextualSubNavigationSubstance currentPage={currentPage} isLinkSharingDisabled={isLinkSharingDisabled} />
+    <GrowiContextualSubNavigationSubstance currentPage={currentPage} isLinkSharingDisabled={isLinkSharingDisabled} isCollapse={isCollapse} />
   );
 };
 
@@ -328,8 +330,14 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
       <div className="dynamic-layout-root justify-content-between">
-        <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
-
+        <Sticky>
+          {({ status }: { status: boolean }) => {
+            const isCollapse = status === Sticky.STATUS_FIXED;
+            return (
+              <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} isCollapse={isCollapse} />
+            );
+          }}
+        </Sticky>
         <DisplaySwitcher
           pageView={(
             <PageView

apps/app/src/pages/share/[[...path]].page.tsx

@@ -6,6 +6,7 @@ import type {
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import Head from 'next/head';
+import Sticky from 'react-stickynode';
 import superjson from 'superjson';
 
 import { ShareLinkLayout } from '~/components/Layout/ShareLinkLayout';
@@ -72,13 +73,14 @@ superjson.registerCustom<IShareLinkRelatedPage, string>(
 type GrowiContextualSubNavigationForSharedPageProps = {
   page?: IPagePopulatedToShowRevision,
   isLinkSharingDisabled: boolean,
+  isCollapse?: boolean,
 }
 
 const GrowiContextualSubNavigationForSharedPage = (props: GrowiContextualSubNavigationForSharedPageProps): JSX.Element => {
-  const { page, isLinkSharingDisabled } = props;
+  const { page, isLinkSharingDisabled, isCollapse } = props;
 
   return (
-    <GrowiContextualSubNavigationSubstance currentPage={page} isLinkSharingDisabled={isLinkSharingDisabled} />
+    <GrowiContextualSubNavigationSubstance currentPage={page} isLinkSharingDisabled={isLinkSharingDisabled} isCollapse={isCollapse} />
   );
 };
 
@@ -120,7 +122,19 @@ const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
       </Head>
 
       <div className="dynamic-layout-root justify-content-between">
-        <GrowiContextualSubNavigationForSharedPage page={currentPage ?? props.shareLinkRelatedPage} isLinkSharingDisabled={props.disableLinkSharing} />
+
+        <Sticky>
+          {({ status }: { status: boolean }) => {
+            const isCollapse = status === Sticky.STATUS_FIXED;
+            return (
+              <GrowiContextualSubNavigationForSharedPage
+                page={currentPage ?? props.shareLinkRelatedPage}
+                isLinkSharingDisabled={props.disableLinkSharing}
+                isCollapse={isCollapse}
+              />
+            );
+          }}
+        </Sticky>
 
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>