Clarify where new document will be created from document header

app/menus/NewChildDocumentMenu.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { MoreIcon } from 'outline-icons';
+
+import { newDocumentUrl } from 'utils/routeHelpers';
+import Document from 'models/Document';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+type Props = {
+  label?: React.Node,
+  history: Object,
+  document: Document,
+};
+
+class NewChildDocumentMenu extends React.Component<Props> {
+  handleNewDocument = () => {
+    const { history, document } = this.props;
+    history.push(newDocumentUrl(document.collection));
+  };
+
+  handleNewChild = () => {
+    const { history, document } = this.props;
+    history.push(
+      `${document.collection.url}/new?parentDocument=${document.id}`
+    );
+  };
+
+  render() {
+    const { label, document, history, ...rest } = this.props;
+    const { collection } = document;
+
+    return (
+      <DropdownMenu label={label || <MoreIcon />} {...rest}>
+        <DropdownMenuItem onClick={this.handleNewChild}>
+          New child document
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={this.handleNewDocument}>
+          <span>
+            New document in <strong>{collection.name}</strong>
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(NewChildDocumentMenu);