change to reactstrap

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -1,4 +1,7 @@
 import React, { FC } from 'react';
+import {
+  UncontrolledDropdown, DropdownMenu, DropdownToggle, DropdownItem,
+} from 'reactstrap';
 
 import toastr from 'toastr';
 import { useTranslation } from 'react-i18next';
@@ -25,15 +28,11 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
     }
   };
   return (
-    <>
-      <button
-        type="button"
-        className="btn-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0 px-2"
-        data-toggle="dropdown"
-      >
+    <UncontrolledDropdown>
+      <DropdownToggle color="transparent" className="btn-link border-0 rounded grw-btn-page-management py-0 px-2">
         <i className="fa fa-ellipsis-v text-muted p-1"></i>
-      </button>
-      <div className="dropdown-menu dropdown-menu-right">
+      </DropdownToggle>
+      <DropdownMenu container="body" right>
 
         {/* TODO: if there is the following button in XD add it here
         <button
@@ -54,40 +53,45 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
         */}
 
         {/* TODO: show dropdown when permalink section is implemented */}
+
         {!isEnableActions && (
-          <p className="dropdown-item">
-            {t('search_result.currently_not_implemented')}
-          </p>
+          <DropdownItem>
+            <p>
+              {t('search_result.currently_not_implemented')}
+            </p>
+          </DropdownItem>
         )}
         {isEnableActions && (
-          <button className="dropdown-item" type="button" onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
+          <DropdownItem onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
             <i className="icon-fw icon-star"></i>
             {t('Add to bookmark')}
-          </button>
+          </DropdownItem>
         )}
         {isEnableActions && (
-          <button className="dropdown-item" type="button" onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
+          <DropdownItem onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
             <i className="icon-fw icon-docs"></i>
             {t('Duplicate')}
-          </button>
+          </DropdownItem>
         )}
         {isEnableActions && (
-          <button className="dropdown-item" type="button" onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
+          <DropdownItem onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
             <i className="icon-fw  icon-action-redo"></i>
             {t('Move/Rename')}
-          </button>
+          </DropdownItem>
         )}
         {isDeletable && isEnableActions && (
           <>
-            <div className="dropdown-divider"></div>
-            <button className="dropdown-item text-danger pt-2" type="button" onClick={deleteButtonHandler}>
+            <DropdownItem divider />
+            <DropdownItem className="text-danger pt-2" onClick={deleteButtonHandler}>
               <i className="icon-fw icon-trash"></i>
               {t('Delete')}
-            </button>
+            </DropdownItem>
           </>
         )}
-      </div>
-    </>
+      </DropdownMenu>
+
+
+    </UncontrolledDropdown>
   );
 
 };

packages/app/src/styles/_sidebar.scss

@@ -344,3 +344,9 @@
     }
   }
 }
+
+.dropdown-menu {
+  // set larger number of z-index set to .grw-sidebar than
+  // the z-index of .grw-sidebar with and without .grw-sidebar-drawer which are relatively 1032 and 1020
+  z-index: 1040 !important;
+}