fix error code

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

@@ -1,16 +1,22 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
 
+
 .grw-page-path-nav-layout :global {
   .grw-page-path-nav-copydropdown {
-    opacity: 0;
+    display: none;
     @include bs.media-breakpoint-down(md) {
-      opacity: 1;
+      display: block;
     }
   }
-  &:hover {
-    .grw-page-path-nav-copydropdown {
-      opacity: 1;
+}
+
+.grw-page-path-nav-layout {
+  &:global {
+    &:hover {
+      .grw-page-path-nav-copydropdown {
+        display: block;
+      }
     }
   }
 }
@@ -24,7 +30,7 @@
 // == Colors
 .grw-former-link :global {
   .separator {
-    opacity: 0.75;
+    // opacity: 0.75;
   }
 }
 

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

@@ -6,6 +6,7 @@ import { useIsNotFound } from '~/stores/page';
 
 import styles from './PagePathNav.module.scss';
 
+const moduleClass = styles['grw-page-path-nav-layout'] ?? '';
 
 export type PagePathNavLayoutProps = {
   className?: string,
@@ -41,7 +42,7 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
 
   return (
     <div
-      className={`${className} ${styles['grw-page-path-nav-layout']}`}
+      className={`${className} ${moduleClass}`}
       style={{ maxWidth }}
     >
       <span className={`${formerLinkClassName ?? ''} ${styles['grw-former-link']}`}>{formerLink}</span>
@@ -54,9 +55,11 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
             { isWipPage && (
               <span className="badge text-bg-secondary ms-1 me-1">WIP</span>
             )}
-            <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName="p-2">
-              <span className="material-symbols-outlined grw-page-path-nav-copydropdown">content_paste</span>
-            </CopyDropdown>
+            <span className=" grw-page-path-nav-copydropdown">
+              <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName="p-2">
+                <span className="material-symbols-outlined">content_paste</span>
+              </CopyDropdown>
+            </span>
           </div>
         ) }
       </div>