WIP: transplant PersonalDropdown

apps/app/src/components/Sidebar/PersonalDropdown.jsx

@@ -1,11 +1,10 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 
 import { pagePathUtils } from '@growi/core/dist/utils';
 import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { useRipple } from 'react-use-ripple';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
@@ -19,10 +18,6 @@ const PersonalDropdown = () => {
 
   const [isQuestionnaireModalOpen, setQuestionnaireModalOpen] = useState(false);
 
-  // ripple
-  const buttonRef = useRef(null);
-  useRipple(buttonRef, { rippleColor: 'rgba(255, 255, 255, 0.3)' });
-
   if (currentUser == null) {
     return <div className="text-muted text-center mb-5">
       <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
@@ -41,65 +36,69 @@ const PersonalDropdown = () => {
 
   return (
     <>
-      {/* Button */}
-      {/* remove .dropdown-toggle for hide caret */}
-      {/* See https://stackoverflow.com/a/44577512/13183572 */}
-      <button className="bg-transparent border-0 nav-link" type="button" ref={buttonRef} data-toggle="dropdown" data-testid="personal-dropdown-button">
-        <UserPicture user={currentUser} noLink noTooltip /><span className="ml-1 d-none d-lg-inline-block">&nbsp;{currentUser.name}</span>
-      </button>
-
-      {/* Menu */}
-      <div className="dropdown-menu dropdown-menu-right" data-testid="personal-dropdown-menu">
-
-        <div className="px-4 pt-3 pb-2 text-center">
-          <UserPicture user={currentUser} size="lg" noLink noTooltip />
-
-          <h5 className="mt-2">
-            {currentUser.name}
-          </h5>
-
-          <div className="my-2">
-            <i className="icon-user icon-fw"></i>{currentUser.username}<br />
-            <i className="icon-envelope icon-fw"></i><span className="grw-email-sm">{currentUser.email}</span>
-          </div>
+      <div className="dropend">
+        {/* Button */}
+        {/* remove .dropdown-toggle for hide caret */}
+        {/* See https://stackoverflow.com/a/44577512/13183572 */}
+        <button type="button"
+          className="btn btn-primary"
+          data-bs-toggle="dropdown" data-testid="personal-dropdown-button" aria-expanded="false"
+        >
+          <UserPicture user={currentUser} noLink noTooltip /><span className="ml-1 d-none d-lg-inline-block">&nbsp;{currentUser.name}</span>
+        </button>
 
-          <div className="btn-group btn-block mt-2" role="group">
-            <Link
-              href={pagePathUtils.userHomepagePath(currentUser)}
-              className="btn btn-sm btn-outline-secondary col"
-              data-testid="grw-personal-dropdown-menu-user-home"
-            >
-              <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
-            </Link>
-            <Link
-              href="/me"
-              className="btn btn-sm btn-outline-secondary col"
-              data-testid="grw-personal-dropdown-menu-user-settings"
-            >
-              <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
-            </Link>
+        {/* Menu */}
+        <div className="dropdown-menu" data-testid="personal-dropdown-menu">
+
+          <div className="px-4 pt-3 pb-2 text-center">
+            <UserPicture user={currentUser} size="lg" noLink noTooltip />
+
+            <h5 className="mt-2">
+              {currentUser.name}
+            </h5>
+
+            <div className="my-2">
+              <i className="icon-user icon-fw"></i>{currentUser.username}<br />
+              <i className="icon-envelope icon-fw"></i><span className="grw-email-sm">{currentUser.email}</span>
+            </div>
+
+            <div className="btn-group btn-block mt-2" role="group">
+              <Link
+                href={pagePathUtils.userHomepagePath(currentUser)}
+                className="btn btn-sm btn-outline-secondary col"
+                data-testid="grw-personal-dropdown-menu-user-home"
+              >
+                <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
+              </Link>
+              <Link
+                href="/me"
+                className="btn btn-sm btn-outline-secondary col"
+                data-testid="grw-personal-dropdown-menu-user-settings"
+              >
+                <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
+              </Link>
+            </div>
           </div>
-        </div>
 
-        <div className="dropdown-divider"></div>
+          <div className="dropdown-divider"></div>
 
-        <button
-          data-testid="grw-proactive-questionnaire-modal-toggle-btn"
-          type="button"
-          className="dropdown-item"
-          onClick={() => setQuestionnaireModalOpen(true)}>
-          <i className="icon-fw icon-pencil"></i>{t('personal_dropdown.feedback')}
-        </button>
+          <button
+            data-testid="grw-proactive-questionnaire-modal-toggle-btn"
+            type="button"
+            className="dropdown-item"
+            onClick={() => setQuestionnaireModalOpen(true)}>
+            <i className="icon-fw icon-pencil"></i>{t('personal_dropdown.feedback')}
+          </button>
 
-        <div className="dropdown-divider"></div>
+          <div className="dropdown-divider"></div>
 
-        <button type="button" className="dropdown-item" onClick={logoutHandler}>
-          <i className="icon-fw icon-power"></i>{t('Sign out')}
-        </button>
+          <button type="button" className="dropdown-item" onClick={logoutHandler}>
+            <i className="icon-fw icon-power"></i>{t('Sign out')}
+          </button>
+        </div>
       </div>
 
       <ProactiveQuestionnaireModal isOpen={isQuestionnaireModalOpen} onClose={() => setQuestionnaireModalOpen(false)} />
-
     </>
   );