create new dropdown item for folder

apps/app/public/static/locales/en_US/translation.json

@@ -790,7 +790,8 @@
     "new_folder": "New Folder",
     "delete": "Delete Folder",
     "drop_item_here": "Drag and drop item here",
-    "cancel_bookmark": "Un-bookmark this page"
+    "cancel_bookmark": "Un-bookmark this page",
+    "Move to the root": "Move to the root"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page tree feature is not available yet.",

apps/app/public/static/locales/ja_JP/translation.json

@@ -824,7 +824,8 @@
     "new_folder": "新しいフォルダ",
     "delete": "フォルダを削除",
     "drop_item_here": "ルートに配置する",
-    "cancel_bookmark": "このページのブックマークを解除"
+    "cancel_bookmark": "このページのブックマークを解除",
+    "move_to_root": "ルートに配置する"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page Tree 機能は現在使用できません。",

apps/app/public/static/locales/zh_CN/translation.json

@@ -794,7 +794,8 @@
     "new_folder": "新建文件夹",
     "delete": "删除文件夹",
     "drop_item_here": "将项目拖放到此处",
-    "cancel_bookmark": "取消收藏此页面"
+    "cancel_bookmark": "取消收藏此页面",
+    "move_to_root": "移动到根部"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable": "Page Tree 功能不可用",

apps/app/src/components/Bookmarks/BookmarkFolderItemControl.tsx

@@ -5,16 +5,22 @@ import {
   Dropdown, DropdownItem, DropdownMenu, DropdownToggle,
 } from 'reactstrap';
 
-
-type BookmarkFolderItemControlProps = {
+export const BookmarkFolderItemControl: React.FC<{
   children?: React.ReactNode
+  isMoveToRoot: boolean
   onClickRename: () => void
   onClickDelete: () => void
-}
-export const BookmarkFolderItemControl = (props: BookmarkFolderItemControlProps): JSX.Element => {
+  onClickMoveToRoot: () => void
+}> = ({
+  children,
+  isMoveToRoot,
+  onClickRename,
+  onClickDelete,
+  onClickMoveToRoot,
+}): JSX.Element => {
   const { t } = useTranslation();
-  const { children, onClickRename, onClickDelete } = props;
   const [isOpen, setIsOpen] = useState(false);
+
   return (
     <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)}>
       { children ?? (
@@ -23,18 +29,29 @@ export const BookmarkFolderItemControl = (props: BookmarkFolderItemControlProps)
         </DropdownToggle>
       ) }
       <DropdownMenu
-        positionFixed
-        modifiers={{ preventOverflow: { boundariesElement: undefined } }}
-        right={true}
+        modifiers={{ preventOverflow: { boundariesElement: 'viewport' } }}
+        container="body"
+        style={{ zIndex: 1055 }} /* make it larger than $zindex-modal of bootstrap */
       >
         <DropdownItem
           onClick={onClickRename}
+          className="grw-page-control-dropdown-item"
         >
           <i className="icon-fw icon-action-redo grw-page-control-dropdown-icon"></i>
           {t('Rename')}
         </DropdownItem>
+        {isMoveToRoot && (
+          <DropdownItem
+            onClick={onClickMoveToRoot}
+            className="grw-page-control-dropdown-item"
+          >
+            <i className="fa fa-fw fa-bookmark-o grw-page-control-dropdown-icon"></i>
+            {t('bookmark_folder.move_to_root')}
+          </DropdownItem>
+        )}
 
         <DropdownItem divider/>
+
         <DropdownItem
           className='pt-2 grw-page-control-dropdown-item text-danger'
           onClick={onClickDelete}