add CollapsedParentsDropdown

apps/app/src/components/Common/PagePathHierarchicalLink/CollapsedParentsDropdown.module.scss

@@ -0,0 +1,6 @@
+
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.collapsed-parents-dropdown-menu {
+  --bs-dropdown-zindex: #{bs.$zindex-fixed};
+}

apps/app/src/components/Common/PagePathHierarchicalLink/CollapsedParentsDropdown.tsx

@@ -0,0 +1,35 @@
+import {
+  DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown,
+} from 'reactstrap';
+
+import LinkedPagePath from '~/models/linked-page-path';
+
+
+import styles from './CollapsedParentsDropdown.module.scss';
+
+
+type Props = {
+  linkedPagePath: LinkedPagePath,
+}
+
+export const CollapsedParentsDropdown = (props: Props): JSX.Element => {
+  const { linkedPagePath } = props;
+
+  return (
+    <UncontrolledDropdown className="d-inline-block">
+      <DropdownToggle color="transparent">...</DropdownToggle>
+      <DropdownMenu className={`dropdown-menu ${styles['collapsed-parents-dropdown-menu']}`} container="body">
+        {/* TODO: generate DropdownItems */}
+        <DropdownItem>
+          <a role="menuitem">foo</a>
+        </DropdownItem>
+        <DropdownItem>
+          <a role="menuitem">bar</a>
+        </DropdownItem>
+        <DropdownItem>
+          <a role="menuitem">baz</a>
+        </DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+};

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -1,6 +1,12 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+.grw-mr-02em {
+  margin-right: 0.2em;
+}
+
 .grw-page-path-nav-sticky :global {
+  min-height: 75px;
+
   .sticky-inner-wrapper {
     z-index: bs.$zindex-sticky;
   }

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

@@ -9,7 +9,7 @@ import { useIsNotFound } from '~/stores/page';
 
 import LinkedPagePath from '../../../models/linked-page-path';
 import { PagePathHierarchicalLink } from '../PagePathHierarchicalLink';
-
+import { CollapsedParentsDropdown } from '../PagePathHierarchicalLink/CollapsedParentsDropdown';
 
 import styles from './PagePathNav.module.scss';
 
@@ -36,13 +36,21 @@ export const PagePathNav: FC<Props> = (props: Props) => {
   const isInTrash = isTrashPage(pagePath);
 
   let formerLink;
+  let collapsedParent;
   let latterLink;
 
   // one line
-  if (dPagePath.isRoot || dPagePath.isFormerRoot || isSingleLineMode) {
+  if (dPagePath.isRoot || dPagePath.isFormerRoot || (!isCollapseParents && isSingleLineMode)) {
     const linkedPagePath = new LinkedPagePath(pagePath);
     latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} isInTrash={isInTrash} />;
   }
+  // collapse parents
+  else if (isCollapseParents) {
+    const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
+    const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
+    collapsedParent = <CollapsedParentsDropdown linkedPagePath={linkedPagePathFormer} />;
+    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} isInTrash={isInTrash} />;
+  }
   // two line
   else {
     const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
@@ -58,7 +66,11 @@ export const PagePathNav: FC<Props> = (props: Props) => {
     <div className="grw-page-path-nav">
       {formerLink}
       <div className="d-flex align-items-center">
-        <h1 className="m-0 text-truncate">{latterLink}</h1>
+        <h1 className="m-0 text-truncate">
+          {collapsedParent}
+          <span className={styles['grw-mr-02em']}>/</span>
+          {latterLink}
+        </h1>
         { pageId != null && !isNotFound && (
           <div className="mx-2">
             <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName={copyDropdownToggleClassName}>
@@ -76,7 +88,7 @@ type PagePathNavStickyProps = Omit<Props, 'isCollapseParents'>;
 
 export const PagePathNavSticky = (props: PagePathNavStickyProps): JSX.Element => {
   return (
-    <Sticky className={styles['grw-page-path-nav-sticky']}>
+    <Sticky className={`${styles['grw-page-path-nav-sticky']} mb-4`}>
       {({ status }: { status: boolean }) => {
         const isCollapseParents = status === Sticky.STATUS_FIXED;
         return <PagePathNav {...props} isCollapseParents={isCollapseParents} />;