chore: Move collection sort control (#1762)

* feat: Move collection sort menu

* fix: Improve accessibility

* fix: Dedupe outline-icons (temporary until rme is next merged)

app/menus/CollectionMenu.js

@@ -26,7 +26,6 @@ type Props = {
   documents: DocumentsStore,
   collection: Collection,
   history: RouterHistory,
-  showSort?: boolean,
   onOpen?: () => void,
   onClose?: () => void,
   t: TFunction,
@@ -71,15 +70,6 @@ class CollectionMenu extends React.Component<Props> {
     }
   };
 
-  handleChangeSort = (field: string) => {
-    return this.props.collection.save({
-      sort: {
-        field,
-        direction: "asc",
-      },
-    });
-  };
-
   handleEditCollectionOpen = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
     this.showCollectionEdit = true;
@@ -122,7 +112,6 @@ class CollectionMenu extends React.Component<Props> {
       documents,
       collection,
       position,
-      showSort,
       onOpen,
       onClose,
       t,
@@ -187,28 +176,6 @@ class CollectionMenu extends React.Component<Props> {
               {
                 type: "separator",
               },
-              {
-                title: t("Sort in sidebar"),
-                visible: can.update && showSort,
-                hover: true,
-                style: {
-                  left: 170,
-                  position: "relative",
-                  top: -40,
-                },
-                items: [
-                  {
-                    title: t("Alphabetical"),
-                    onClick: () => this.handleChangeSort("title"),
-                    selected: collection.sort.field === "title",
-                  },
-                  {
-                    title: t("Manual sort"),
-                    onClick: () => this.handleChangeSort("index"),
-                    selected: collection.sort.field === "index",
-                  },
-                ],
-              },
               {
                 type: "separator",
               },

app/menus/CollectionSortMenu.js

@@ -0,0 +1,71 @@
+// @flow
+import { observer } from "mobx-react";
+import { AlphabeticSortIcon, ManualSortIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Collection from "models/Collection";
+import { DropdownMenu } from "components/DropdownMenu";
+import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
+import NudeButton from "components/NudeButton";
+
+type Props = {
+  position?: "left" | "right" | "center",
+  collection: Collection,
+  onOpen?: () => void,
+  onClose?: () => void,
+};
+
+function CollectionSortMenu({
+  collection,
+  position,
+  onOpen,
+  onClose,
+  ...rest
+}: Props) {
+  const { t } = useTranslation();
+
+  const handleChangeSort = React.useCallback(
+    (field: string) => {
+      return collection.save({
+        sort: {
+          field,
+          direction: "asc",
+        },
+      });
+    },
+    [collection]
+  );
+
+  const alphabeticalSort = collection.sort.field === "title";
+
+  return (
+    <DropdownMenu
+      onOpen={onOpen}
+      onClose={onClose}
+      label={
+        <NudeButton aria-label={t("Sidebar sort")} aria-haspopup="true">
+          {alphabeticalSort ? <AlphabeticSortIcon /> : <ManualSortIcon />}
+        </NudeButton>
+      }
+      position={position}
+      {...rest}
+    >
+      <DropdownMenuItems
+        items={[
+          {
+            title: t("Alphabetical sort"),
+            onClick: () => handleChangeSort("title"),
+            selected: alphabeticalSort,
+          },
+          {
+            title: t("Manual sort"),
+            onClick: () => handleChangeSort("index"),
+            selected: !alphabeticalSort,
+          },
+        ]}
+      />
+    </DropdownMenu>
+  );
+}
+
+export default observer(CollectionSortMenu);