refactor styles

apps/app/src/components-universal/Common/PagePathNav/PagePathNavLayout.tsx

@@ -8,6 +8,7 @@ import styles from './PagePathNav.module.scss';
 
 
 export type PagePathNavLayoutProps = {
+  className?: string,
   pagePath: string,
   pageId?: string | null,
   isWipPage?: boolean,
@@ -25,9 +26,12 @@ const CopyDropdown = dynamic(() => import('../../../components/Common/CopyDropdo
 
 export const PagePathNavLayout = (props: Props): JSX.Element => {
   const {
+    className = '',
     pageId, pagePath, isWipPage,
-    formerLink, formerLinkClassName,
-    latterLink, latterLinkClassName,
+    formerLink,
+    formerLinkClassName = '',
+    latterLink,
+    latterLinkClassName = '',
     maxWidth,
   } = props;
 
@@ -36,7 +40,7 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
   const copyDropdownId = `copydropdown-${pageId}`;
 
   return (
-    <div style={{ maxWidth }}>
+    <div className={className} style={{ maxWidth }}>
       <span className={`${formerLinkClassName ?? ''} ${styles['grw-former-link']}`}>{formerLink}</span>
       <div className="d-flex align-items-center">
         <h1 className={`m-0 ${latterLinkClassName}`}>

apps/app/src/components-universal/Common/PagePathNavTitle/PagePathNavTitle.module.scss

@@ -0,0 +1,5 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+
+.grw-page-path-nav-title :global {
+  min-height: 75px;
+}

apps/app/src/components-universal/Common/PagePathNavTitle/PagePathNavTitle.tsx

@@ -7,6 +7,11 @@ import { useIsomorphicLayoutEffect } from 'usehooks-ts';
 import { PagePathNav } from '../PagePathNav';
 import type { PagePathNavLayoutProps } from '../PagePathNav';
 
+import styles from './PagePathNavTitle.module.scss';
+
+const moduleClass = styles['grw-page-path-nav-title'] ?? '';
+
+
 const PagePathNavSticky = withLoadingProps<PagePathNavLayoutProps>(useLoadingProps => dynamic(
   () => import('~/components/PagePathNavSticky').then(mod => mod.PagePathNavSticky),
   {
@@ -32,7 +37,7 @@ export const PagePathNavTitle = (props: PagePathNavLayoutProps): JSX.Element =>
   }, []);
 
   return isClient
-    ? <PagePathNavSticky {...props} />
-    : <PagePathNav {...props} />;
+    ? <PagePathNavSticky {...props} className={moduleClass} latterLinkClassName="fs-2" />
+    : <PagePathNav {...props} className={moduleClass} latterLinkClassName="fs-2" />;
 
 };

apps/app/src/components/PagePathNavSticky/PagePathNavSticky.module.scss

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

apps/app/src/components/PagePathNavSticky/PagePathNavSticky.tsx

@@ -79,7 +79,7 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
     // Controlling pointer-events
     //  1. disable pointer-events with 'pe-none'
     <div ref={pagePathNavRef}>
-      <Sticky className={`${moduleClass} mb-4`} innerClass="mt-1 pe-none" innerActiveClass="active">
+      <Sticky className={`${moduleClass} mb-4`} innerClass="pe-none" innerActiveClass="active mt-1">
         {({ status }) => {
           const isCollapseParents = status === Sticky.STATUS_FIXED;
           return (
@@ -91,7 +91,7 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
               <PagePathNavLayout
                 {...props}
                 latterLink={latterLink}
-                latterLinkClassName={isCollapseParents ? 'fs-3  text-truncate' : 'fs-2'}
+                latterLinkClassName={isCollapseParents ? 'fs-3  text-truncate' : props.latterLinkClassName}
                 maxWidth={isCollapseParents ? navMaxWidth : undefined}
               />
             </div>