convert to CSS Module

packages/app/src/components/Navbar/GrowiNavbarBottom.scss → packages/app/src/components/Navbar/GrowiNavbarBottom.module.scss

@@ -1,14 +1,16 @@
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
-.grw-navbar-bottom {
+.grw-navbar-bottom :global {
   height: var.$grw-navbar-bottom-height;
 
   // apply transition
   transition-property: bottom;
   @include mixins.apply-navigation-transition();
+}
 
-  &.grw-navbar-bottom-drawer-opened {
+.grw-navbar-bottom {
+  &:global(.grw-navbar-bottom-drawer-opened) {
     bottom: #{-1 * var.$grw-navbar-bottom-height};
   }
 }

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

@@ -6,7 +6,7 @@ import { useIsDeviceSmallerThanMd, useDrawerOpened } from '~/stores/ui';
 
 import { GlobalSearch } from './GlobalSearch';
 
-import './GrowiNavbarBottom.scss';
+import styles from './GrowiNavbarBottom.module.scss';
 
 
 export const GrowiNavbarBottom = (): JSX.Element => {
@@ -17,7 +17,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: isSearchPage } = useIsSearchPage();
 
-  const additionalClasses = ['grw-navbar-bottom'];
+  const additionalClasses = ['grw-navbar-bottom', styles['grw-navbar-bottom']];
   if (isDrawerOpened) {
     additionalClasses.push('grw-navbar-bottom-drawer-opened');
   }