enable Fab.jsx

packages/app/src/components/Fab.jsx

@@ -13,6 +13,8 @@ import loggerFactory from '~/utils/logger';
 import CreatePageIcon from './Icons/CreatePageIcon';
 import ReturnTopIcon from './Icons/ReturnTopIcon';
 
+import styles from './Fab.module.scss';
+
 const logger = loggerFactory('growi:cli:Fab');
 
 const Fab = () => {
@@ -31,7 +33,7 @@ const Fab = () => {
   const stickyChangeHandler = useCallback((event) => {
     logger.debug('StickyEvents.CHANGE detected');
 
-    const newAnimateClasses = event.detail.isSticky ? 'animated fadeInUp faster' : 'animated fadeOut faster';
+    const newAnimateClasses = event.detail.isSticky ? 'animated fadeinup faster' : 'animated fadeout faster';
     const newButtonClasses = event.detail.isSticky ? '' : 'disabled grw-pointer-events-none';
 
     setAnimateClasses(newAnimateClasses);
@@ -71,9 +73,9 @@ const Fab = () => {
   }
 
   return (
-    <div className="grw-fab d-none d-md-block d-edit-none" data-testid="grw-fab">
+    <div className={`${styles['grw-fab']} grw-fab d-none d-md-block d-edit-none`} data-testid="grw-fab">
       {currentUser != null && renderPageCreateButton()}
-      <div data-testid="grw-fab-return-to-top" className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>
+      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }} data-testid="grw-fab-return-to-top">
         <button
           type="button"
           className={`btn btn-light btn-scroll-to-top rounded-circle p-0 ${buttonClasses}`}

packages/app/src/components/Fab.module.scss

@@ -0,0 +1,16 @@
+
+.grw-fab :global {
+  .fadeInUp {
+
+  }
+
+  .fadeOut {
+
+  }
+}
+
+// @keyframes fadeout {
+//   100% {
+//     opacity: 0;
+//   }
+// }

packages/app/src/components/Layout/BasicLayout.tsx

@@ -19,6 +19,8 @@ const PageDeleteModal = dynamic(() => import('../PageDeleteModal'), { ssr: false
 const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false });
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
+// Fab
+const Fab = dynamic(() => import('../Fab'), { ssr: false });
 
 
 type Props = {
@@ -58,6 +60,8 @@ export const BasicLayout = ({
       <PageAccessoriesModal />
       {/* <HotkeysManager /> */}
 
+      <Fab />
+
       <ShortcutsModal />
       <SystemVersion showShortcutsButton />
     </RawLayout>