Merge pull request #607 from outline/menu-improves

Menu Improvements

app/components/DropdownMenu/DropdownMenu.js

@@ -21,7 +21,6 @@ type Props = {
 class DropdownMenu extends Component {
   props: Props;
   @observable top: number;
-  @observable left: number;
   @observable right: number;
 
   handleOpen = (openPortal: SyntheticEvent => void) => {
@@ -59,7 +58,6 @@ class DropdownMenu extends Component {
                 key="menu"
                 onClick={closePortal}
                 style={this.props.style}
-                left={this.left}
                 top={this.top}
                 right={this.right}
               >

app/components/DropdownMenu/DropdownMenuItem.js

@@ -1,20 +1,23 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
 import { color } from 'shared/styles/constants';
 
-const DropdownMenuItem = ({
-  onClick,
-  children,
-}: {
+type Props = {
   onClick?: SyntheticEvent => void,
   children?: React.Element<any>,
-}) => {
-  return <MenuItem onClick={onClick}>{children}</MenuItem>;
 };
 
-const MenuItem = styled(Flex)`
+const DropdownMenuItem = ({ onClick, children, ...rest }: Props) => {
+  return (
+    <MenuItem onClick={onClick} {...rest}>
+      {children}
+    </MenuItem>
+  );
+};
+
+const MenuItem = styled.a`
+  display: flex;
   margin: 0;
   padding: 5px 10px;
   height: 32px;
@@ -29,11 +32,6 @@ const MenuItem = styled(Flex)`
     margin-right: 8px;
   }
 
-  a {
-    text-decoration: none;
-    width: 100%;
-  }
-
   &:hover {
     color: ${color.white};
     background: ${color.primary};

app/menus/AccountMenu.js

@@ -5,7 +5,12 @@ import { inject, observer } from 'mobx-react';
 import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
-import { spectrumUrl } from '../../shared/utils/routeHelpers';
+import {
+  developers,
+  githubIssuesUrl,
+  mailToUrl,
+  spectrumUrl,
+} from '../../shared/utils/routeHelpers';
 
 @observer
 class AccountMenu extends Component {
@@ -24,18 +29,10 @@ class AccountMenu extends Component {
     this.props.history.push('/settings');
   };
 
-  handleApi = () => {
-    window.location.href = '/developers';
-  };
-
   handleLogout = () => {
     this.props.auth.logout();
   };
 
-  handleFeedback = () => {
-    window.location.href = spectrumUrl();
-  };
-
   render() {
     return (
       <DropdownMenu
@@ -48,12 +45,20 @@ class AccountMenu extends Component {
         <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
           Keyboard shortcuts
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={this.handleApi}>
+        <DropdownMenuItem href={developers()} target="_blank">
           API documentation
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={this.handleFeedback}>
-          Feedback
+        <hr />
+        <DropdownMenuItem href={spectrumUrl()} target="_blank">
+          Community
         </DropdownMenuItem>
+        <DropdownMenuItem href={mailToUrl()} target="_blank">
+          Send us feedback
+        </DropdownMenuItem>
+        <DropdownMenuItem href={githubIssuesUrl()} target="_blank">
+          Report a bug
+        </DropdownMenuItem>
+        <hr />
         <DropdownMenuItem onClick={this.handleLogout}>Logout</DropdownMenuItem>
       </DropdownMenu>
     );

shared/utils/routeHelpers.js

@@ -29,6 +29,10 @@ export function githubUrl(): string {
   return 'https://www.github.com/outline';
 }
 
+export function githubIssuesUrl(): string {
+  return 'https://www.github.com/outline/outline/issues';
+}
+
 export function blogUrl(): string {
   return 'https://medium.com/getoutline';
 }
@@ -41,6 +45,10 @@ export function spectrumUrl(): string {
   return 'https://spectrum.chat/outline';
 }
 
+export function mailToUrl(): string {
+  return 'mailto:hello@getoutline.com';
+}
+
 export function developers(): string {
   return '/developers';
 }