Replaced by reactsrap

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.tsx

@@ -5,6 +5,9 @@ import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
+import {
+  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
+} from 'reactstrap';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
@@ -18,6 +21,7 @@ export const PersonalDropdown = (): JSX.Element => {
   const { t } = useTranslation('commons');
   const { data: currentUser } = useCurrentUser();
 
+  const [isOpen, setIsOpen] = useState(false);
   const [isQuestionnaireModalOpen, setQuestionnaireModalOpen] = useState(false);
 
   if (currentUser == null) {
@@ -36,23 +40,21 @@ export const PersonalDropdown = (): JSX.Element => {
 
   return (
     <>
-      <div className="dropend">
-        {/* Button */}
-        {/* remove .dropdown-toggle for hide caret */}
-        {/* See https://stackoverflow.com/a/44577512/13183572 */}
-        <button
-          type="button"
+      <Dropdown
+        direction="end"
+        isOpen={isOpen}
+        toggle={() => setIsOpen(!isOpen)}
+        aria-expanded={false}
+      >
+        <DropdownToggle
           className="btn btn-primary"
-          data-bs-toggle="dropdown"
           data-testid="personal-dropdown-button"
-          aria-expanded="false"
         >
           <UserPicture user={currentUser} noLink noTooltip />
-        </button>
+        </DropdownToggle>
 
-        {/* Menu */}
-        <ul className="dropdown-menu" data-testid="personal-dropdown-menu">
-          <li className="px-4 pt-3 pb-2">
+        <DropdownMenu container="body">
+          <DropdownItem className="px-4 pt-3 pb-2">
             <UserPicture user={currentUser} size="lg" noLink noTooltip />
             <h5>{currentUser.name}</h5>
             <div className="d-flex align-items-center">
@@ -61,46 +63,40 @@ export const PersonalDropdown = (): JSX.Element => {
             <div className="d-flex align-items-center">
               <i className="icon-envelope icon-fw"></i><span className="grw-email-sm">{currentUser.email}</span>
             </div>
-          </li>
+          </DropdownItem>
 
-          <li className="dropdown-divider"></li>
+          <DropdownItem divider />
 
-          <li>
+          <DropdownItem>
             <Link
               href={pagePathUtils.userHomepagePath(currentUser)}
-              className="dropdown-item"
               data-testid="grw-personal-dropdown-menu-user-home"
             >
               <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
             </Link>
-          </li>
-          <li>
+          </DropdownItem>
+
+          <DropdownItem>
             <Link
               href="/me"
-              className="dropdown-item"
               data-testid="grw-personal-dropdown-menu-user-settings"
             >
               <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
             </Link>
-          </li>
-          <li>
-            <button
-              data-testid="grw-proactive-questionnaire-modal-toggle-btn"
-              type="button"
-              className="dropdown-item"
-              onClick={() => setQuestionnaireModalOpen(true)}
-            >
-              <span className="material-symbols-outlined">edit</span>{t('personal_dropdown.feedback')}
-            </button>
-          </li>
-          <li>
-            <button type="button" className="dropdown-item" onClick={logoutHandler}>
-              <i className="icon-fw icon-power"></i>{t('Sign out')}
-            </button>
-          </li>
-        </ul>
-
-      </div>
+          </DropdownItem>
+
+          <DropdownItem
+            data-testid="grw-proactive-questionnaire-modal-toggle-btn"
+            onClick={() => setQuestionnaireModalOpen(true)}
+          >
+            <span className="material-symbols-outlined">edit</span>{t('personal_dropdown.feedback')}
+          </DropdownItem>
+
+          <DropdownItem onClick={logoutHandler}>
+            <i className="icon-fw icon-power"></i>{t('Sign out')}
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
 
       <ProactiveQuestionnaireModal isOpen={isQuestionnaireModalOpen} onClose={() => setQuestionnaireModalOpen(false)} />
     </>

apps/app/src/components/Sidebar/SidebarNav/SecondaryItems.tsx

@@ -1,4 +1,5 @@
-import { FC, memo } from 'react';
+import type { FC } from 'react';
+import { memo } from 'react';
 
 import dynamic from 'next/dynamic';
 import Link from 'next/link';

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

@@ -24,7 +24,7 @@ export const SidebarNav = memo((props: SidebarNavProps) => {
         <PrimaryItems onItemHover={onPrimaryItemHover} />
       </div>
 
-      <div className="grw-sidebar-nav-secondary-container position-absolute">
+      <div className="grw-sidebar-nav-secondary-container">
         <SecondaryItems />
       </div>
     </div>