add GroundGlassBar

apps/app/src/components/Navbar/GroundGlassBar.module.scss

@@ -0,0 +1,4 @@
+.ground-glass-bar {
+  background-color: rgba(var(--bs-body-bg-rgb), 0.7);
+  backdrop-filter: blur(35px);
+}

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

@@ -0,0 +1,17 @@
+import type { DetailedHTMLProps } from 'react';
+
+import styles from './GroundGlassBar.module.scss';
+
+const moduleClass = styles['ground-glass-bar'];
+
+type Props = DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export const GroundGlassBar = (props: Props): JSX.Element => {
+  const { className, children, ...rest } = props;
+
+  return (
+    <div className={`${moduleClass} ${className ?? ''}`} {...rest}>
+      {children}
+    </div>
+  );
+};

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -1,10 +1,5 @@
 @use '~/styles/mixins';
 
-.grw-contextual-sub-navigation :global {
-  background-color: rgba(var(--bs-body-bg-rgb), 0.7);
-  backdrop-filter: blur(35px);
-}
-
 @include mixins.editing() {
   .grw-contextual-sub-navigation {
     position: fixed;

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

@@ -36,6 +36,8 @@ import { CreateTemplateModal } from '../CreateTemplateModal';
 import { NotAvailable } from '../NotAvailable';
 import { Skeleton } from '../Skeleton';
 
+import { GroundGlassBar } from './GroundGlassBar';
+
 import styles from './GrowiContextualSubNavigation.module.scss';
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
 
@@ -288,7 +290,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
   return (
     <>
-      <div
+      <GroundGlassBar
         className={`${styles['grw-contextual-sub-navigation']}
           d-flex align-items-center justify-content-end px-2 px-sm-3 px-md-4 py-1 gap-2 gap-md-4 d-print-none
         `}
@@ -331,7 +333,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
             </Link>
           </div>
         ) }
-      </div>
+      </GroundGlassBar>
 
       {path != null && currentUser != null && !isReadOnlyUser && (
         <CreateTemplateModal

apps/app/src/components/Navbar/GrowiNavbarBottom.module.scss

@@ -22,11 +22,3 @@
     align-items: center;
   }
 }
-
-// == Colors
-.grw-navbar-bottom :global {
-  .navbar {
-    background-color: rgba(var(--bs-body-bg-rgb), 0.7);
-    backdrop-filter: blur(35px);
-  }
-}

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

@@ -6,6 +6,8 @@ import { usePageCreateModal } from '~/stores/modal';
 import { useCurrentPagePath } from '~/stores/page';
 import { useDrawerOpened } from '~/stores/ui';
 
+import { GroundGlassBar } from './GroundGlassBar';
+
 import styles from './GrowiNavbarBottom.module.scss';
 
 
@@ -18,7 +20,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
   const { open: openSearchModal } = useSearchModal();
 
   return (
-    <div className={`
+    <GroundGlassBar className={`
       ${styles['grw-navbar-bottom']}
       ${isDrawerOpened ? styles['grw-navbar-bottom-drawer-opened'] : ''}
       d-md-none d-edit-none d-print-none fixed-bottom`}
@@ -73,6 +75,6 @@ export const GrowiNavbarBottom = (): JSX.Element => {
         </ul>
       </div>
 
-    </div>
+    </GroundGlassBar>
   );
 };