Merge pull request #6294 from weseek/feat/gw7837-add-dropdown-button-to-bookmark-item

feat: gw7837 add dropdown button to bookmark item

packages/app/src/components/Sidebar/Bookmarks.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { DevidedPagePath } from '@growi/core';
 import { useTranslation } from 'react-i18next';
-import { UncontrolledTooltip } from 'reactstrap';
+import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3Get } from '~/client/util/apiv3-client';
@@ -11,6 +11,9 @@ import { IPageHasId } from '~/interfaces/page';
 import { useCurrentUser, useIsGuestUser } from '~/stores/context';
 import loggerFactory from '~/utils/logger';
 
+
+import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
+
 const logger = loggerFactory('growi:BookmarkList');
 
 // TODO: Remove pagination and apply  scrolling (not infinity)
@@ -26,21 +29,32 @@ const BookmarksItem = (props: Props) => {
   const generateBookmarkedPageList = pages.map((page) => {
     const dPagePath = new DevidedPagePath(page.path, false, true);
     const { latter: pageTitle, former: formerPagePath } = dPagePath;
+    const bookmarkItemId = `bookmark-item-${page._id}`;
+
     return (
-      <div key={page._id}>
-        <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" id={`bookmark-item-${page._id}`}>
+      <div className="d-flex justify-content-between" key={page._id}>
+        <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" id={bookmarkItemId}>
           <a href={`/${page._id}`} className="grw-bookmarks-title-anchor flex-grow-1">
             <p className={`text-truncate m-auto ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
           </a>
+          <PageItemControl
+            pageId={page._id}
+            isEnableActions
+            forceHideMenuItems={[MenuItemType.DUPLICATE]}
+          >
+            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+              <i className="icon-options fa fa-rotate-90 p-1"></i>
+            </DropdownToggle>
+          </PageItemControl>
+          <UncontrolledTooltip
+            modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
+            autohide={false}
+            placement="right"
+            target={bookmarkItemId}
+          >
+            { formerPagePath || '/' }
+          </UncontrolledTooltip>
         </li>
-        <UncontrolledTooltip
-          modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
-          autohide={false}
-          placement="right"
-          target={`bookmark-item-${page._id}`}
-        >
-          { formerPagePath || '/' }
-        </UncontrolledTooltip>
       </div>
     );
   });