implement dropdown using reactstrap

apps/app/src/components/Sidebar/PageCreateButton/DropendMenu.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
+import { DropdownMenu, DropdownItem } from 'reactstrap';
 
 import { LabelType } from '~/interfaces/template';
 
+
 type DropendMenuProps = {
   onClickCreateNewPageButtonHandler: () => Promise<void>
   onClickCreateTodaysButtonHandler: () => Promise<void>
@@ -22,52 +24,85 @@ export const DropendMenu = React.memo((props: DropendMenuProps): JSX.Element =>
   const { t } = useTranslation('commons');
 
   return (
-    <ul className="dropdown-menu">
-      <li>
-        <button
-          className="dropdown-item"
+    <>
+      {/* <ul className="dropdown-menu">
+        <li>
+          <button
+            className="dropdown-item"
+            onClick={onClickCreateNewPageButtonHandler}
+            type="button"
+          >
+            {t('create_page_dropdown.new_page')}
+          </button>
+        </li>
+        {todaysPath != null && (
+          <>
+            <li><hr className="dropdown-divider" /></li>
+            <li><span className="text-muted px-3">{t('create_page_dropdown.todays.desc')}</span></li>
+            <li>
+              <button
+                className="dropdown-item"
+                onClick={onClickCreateTodaysButtonHandler}
+                type="button"
+              >
+                {todaysPath}
+              </button>
+            </li>
+          </>
+        )}
+        <li><hr className="dropdown-divider" /></li>
+        <li><span className="text-muted text-nowrap px-3">{t('create_page_dropdown.template.desc')}</span></li>
+        <li>
+          <button
+            className="dropdown-item"
+            onClick={() => onClickTemplateButtonHandler('_template')}
+            type="button"
+          >
+            {t('create_page_dropdown.template.children')}
+          </button>
+        </li>
+        <li>
+          <button
+            className="dropdown-item"
+            onClick={() => onClickTemplateButtonHandler('__template')}
+            type="button"
+          >
+            {t('create_page_dropdown.template.descendants')}
+          </button>
+        </li>
+      </ul> */}
+
+      <DropdownMenu container="body">
+        <DropdownItem
           onClick={onClickCreateNewPageButtonHandler}
-          type="button"
         >
           {t('create_page_dropdown.new_page')}
-        </button>
-      </li>
-      {todaysPath != null && (
-        <>
-          <li><hr className="dropdown-divider" /></li>
-          <li><span className="text-muted px-3">{t('create_page_dropdown.todays.desc')}</span></li>
-          <li>
-            <button
-              className="dropdown-item"
+        </DropdownItem>
+        {todaysPath != null && (
+          <>
+            <DropdownItem divider />
+            <li><span className="text-muted px-3">{t('create_page_dropdown.todays.desc')}</span></li>
+            <DropdownItem
               onClick={onClickCreateTodaysButtonHandler}
-              type="button"
             >
               {todaysPath}
-            </button>
-          </li>
-        </>
-      )}
-      <li><hr className="dropdown-divider" /></li>
-      <li><span className="text-muted text-nowrap px-3">{t('create_page_dropdown.template.desc')}</span></li>
-      <li>
-        <button
-          className="dropdown-item"
+            </DropdownItem>
+          </>
+        )}
+        <DropdownItem divider />
+        <li><span className="text-muted text-nowrap px-3">{t('create_page_dropdown.template.desc')}</span></li>
+        <DropdownItem
           onClick={() => onClickTemplateButtonHandler('_template')}
-          type="button"
         >
           {t('create_page_dropdown.template.children')}
-        </button>
-      </li>
-      <li>
-        <button
-          className="dropdown-item"
+        </DropdownItem>
+        <DropdownItem
           onClick={() => onClickTemplateButtonHandler('__template')}
-          type="button"
         >
           {t('create_page_dropdown.template.descendants')}
-        </button>
-      </li>
-    </ul>
+        </DropdownItem>
+      </DropdownMenu>
+    </>
   );
 });
 DropendMenu.displayName = 'DropendMenu';

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.tsx

@@ -1,9 +1,12 @@
 import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 
+import { DropdownToggle } from 'reactstrap';
+
 import { Hexagon } from './Hexagon';
 
 import styles from './DropendToggle.module.scss';
 
+
 const moduleClass = styles['btn-toggle'];
 
 

apps/app/src/components/Sidebar/PageCreateButton/PageCreateButton.tsx

@@ -4,6 +4,7 @@ import type { IUserHasId } from '@growi/core';
 import { pagePathUtils } from '@growi/core/dist/utils';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
+import { Dropdown } from 'reactstrap';
 
 import { useOnTemplateButtonClicked } from '~/client/services/use-on-template-button-clicked';
 import { toastError } from '~/client/util/toastr';
@@ -16,6 +17,7 @@ import { DropendMenu } from './DropendMenu';
 import { DropendToggle } from './DropendToggle';
 import { useOnNewButtonClicked, useOnTodaysButtonClicked } from './hooks';
 
+
 const generateTodaysPath = (currentUser: IUserHasId, parentDirName: string) => {
   const now = format(new Date(), 'yyyy/MM/dd');
   const userHomepagePath = pagePathUtils.userHomepagePath(currentUser);
@@ -73,21 +75,21 @@ export const PageCreateButton = React.memo((): JSX.Element => {
           disabled={isNewPageCreating || isTodaysPageCreating || isTemplatePageCreating}
         />
       </div>
-      { isHovered && (
-        <div className="btn-group dropend position-absolute">
-          <DropendToggle
-            className="dropdown-toggle dropdown-toggle-split"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-          />
-          <DropendMenu
-            onClickCreateNewPageButtonHandler={onClickNewButton}
-            onClickCreateTodaysButtonHandler={onClickTodaysButton}
-            onClickTemplateButtonHandler={onClickTemplateButtonHandler}
-            todaysPath={todaysPath}
-          />
-        </div>
-      )}
+      <Dropdown
+        direction="end"
+      >
+        <DropendToggle
+          // className="dropdown-toggle dropdown-toggle-split"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        />
+        <DropendMenu
+          onClickCreateNewPageButtonHandler={onClickNewButton}
+          onClickCreateTodaysButtonHandler={onClickTodaysButton}
+          onClickTemplateButtonHandler={onClickTemplateButtonHandler}
+          todaysPath={todaysPath}
+        />
+      </Dropdown>
     </div>
   );
 });