ensure to be able to change link colors of PagePathHierarchicalLink

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -33,17 +33,17 @@ const GrowiSubNavigation = (props) => {
 
   const dPagePath = new DevidedPagePath(pageContainer.state.path, false, true);
   const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
-  const renderFormerLink = () => (
-    <>
-      { !dPagePath.isRoot && <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} /> }
-    </>
+  const FormerLink = () => (
+    <div className="grw-page-path-text-muted-container">
+      <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} />
+    </div>
   );
 
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden || isPageInTrash) {
     return (
       <div className="px-3 py-3 grw-subnavbar">
-        { renderFormerLink() }
+        { !dPagePath.isRoot && <FormerLink /> }
         <h1 className="m-0">
           <RevisionPath
             pageId={pageId}
@@ -73,7 +73,7 @@ const GrowiSubNavigation = (props) => {
 
       {/* Page Path */}
       <div>
-        { renderFormerLink() }
+        { !dPagePath.isRoot && <FormerLink /> }
         <h1 className="m-0">
           <RevisionPath pageId={pageId} pagePath={pageContainer.state.path} />
         </h1>

src/client/styles/scss/_page-path.scss

@@ -0,0 +1,14 @@
+.grw-page-path-hierarchical-link {
+  .separator {
+    margin-right: 0.2em;
+    margin-left: 0.2em;
+  }
+}
+
+.grw-page-path-text-muted-container .grw-page-path-hierarchical-link {
+  // overwrite link color
+  &,
+  a {
+    @extend .text-muted;
+  }
+}

src/client/styles/scss/_subnav.scss

@@ -77,11 +77,6 @@ header.grw-header {
     line-height: 1.1em;
   }
 
-  .separator {
-    margin-right: 0.2em;
-    margin-left: 0.2em;
-  }
-
   ul.authors {
     padding-left: 1.5em;
     margin: 0;

src/client/styles/scss/style-app.scss

@@ -47,6 +47,7 @@
 @import 'notification';
 @import 'on-edit';
 @import 'page_list';
+@import 'page-path';
 @import 'page';
 @import 'search';
 @import 'shortcuts';

src/lib/components/PagePathHierarchicalLink.jsx

@@ -42,17 +42,24 @@ const PagePathHierarchicalLink = (props) => {
 
   const href = encodeURI(urljoin(basePath || '/', linkedPagePath.href));
 
+  // eslint-disable-next-line react/prop-types
+  const RootElm = ({ children }) => {
+    return props.isInnerElem
+      ? <>{children}</>
+      : <span className="grw-page-path-hierarchical-link">{children}</span>;
+  };
+
   return (
-    <>
+    <RootElm>
       { isParentExists && (
-        <PagePathHierarchicalLink linkedPagePath={linkedPagePath.parent} basePath={basePath} />
+        <PagePathHierarchicalLink linkedPagePath={linkedPagePath.parent} basePath={basePath} isInnerElem />
       ) }
       { isSeparatorRequired && (
         <span className="separator">/</span>
       ) }
 
       <a className="page-segment" href={href}>{linkedPagePath.pathName}</a>
-    </>
+    </RootElm>
   );
 };
 
@@ -60,6 +67,9 @@ PagePathHierarchicalLink.propTypes = {
   linkedPagePath: PropTypes.instanceOf(LinkedPagePath).isRequired,
   basePath: PropTypes.string,
 
+  // !!INTERNAL USE ONLY!!
+  isInnerElem: PropTypes.bool,
+
   isPageInTrash: PropTypes.bool, // TODO: omit
 };