Improve dropdown menus, animation ⚡

frontend/scenes/Document/components/Menu.js

@@ -1,6 +1,5 @@
 // @flow
 import React, { Component } from 'react';
-import invariant from 'invariant';
 import get from 'lodash/get';
 import { withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react';
@@ -21,7 +20,6 @@ type Props = {
   };
 
   onCreateChild = () => {
-    invariant(this.props.document, 'Document is not available');
     this.props.history.push(`${this.props.document.url}/new`);
   };
 
@@ -41,41 +39,24 @@ type Props = {
   };
 
   onExport = () => {
-    const doc = this.props.document;
-    if (doc) {
-      const a = document.createElement('a');
-      a.textContent = 'download';
-      a.download = `${doc.title}.md`;
-      a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(doc.text)}`;
-      a.click();
-    }
+    this.props.document.download();
   };
 
   render() {
-    const document = get(this.props, 'document');
-    if (document) {
-      const collection = document.collection;
-      const allowDelete =
-        collection &&
-        collection.type === 'atlas' &&
-        collection.documents &&
-        collection.documents.length > 1;
+    const collection = this.props.document.collection;
+    const allowDelete = this.props.document.allowDelete;
 
-      return (
-        <DropdownMenu label={<Icon type="MoreHorizontal" />}>
-          {collection &&
-            <div>
-              <DropdownMenuItem onClick={this.onCreateDocument}>
-                New document
-              </DropdownMenuItem>
-            </div>}
-          <DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
-          {allowDelete &&
-            <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
-        </DropdownMenu>
-      );
-    }
-    return null;
+    return (
+      <DropdownMenu label={<Icon type="MoreHorizontal" />} top right>
+        {collection &&
+          <DropdownMenuItem onClick={this.onCreateDocument}>
+            New document
+          </DropdownMenuItem>}
+        <DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
+        {allowDelete &&
+          <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
+      </DropdownMenu>
+    );
   }
 }