feat(stylguide): appbar menu component

packages/component-faraday-ui/src/AppBar.md

 A sticky app bar. For demo purposes it's not fixed to the top at the moment.
 
 ```js
+const currentUser = {
+  admin: true,
+  user: {
+    username: 'cocojambo',
+    firstName: 'Alex',
+    lastName: 'Munteanu'
+  }
+};
+
 const HindawiLogo = () => <Logo
   onClick={() => console.log('Hindawi best publish!')}
   title="Hindawi"
   src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Hindawi.svg/1200px-Hindawi.svg.png"
 />;
 
-const MenuComponent = () => <div style={{marginLeft: 8}}>
-  MENU
-</div>;
+const MenuComponent = () => <AppBarMenu
+  currentUser={currentUser}
+  goTo={path => console.log(`navigating to ${path}`)}
+  logout={() => console.log('logging out')}
+  />;
+
 const AutosaveComponent = () => <div>AUTOSAVE</div>;
 
 <AppBar
@@ -19,7 +31,44 @@ const AutosaveComponent = () => <div>AUTOSAVE</div>;
   journal={{
     name:'Chemistry Awesomeness', 
     backgroundImage: 'https://images.hindawi.com/journals/jchem/jchem.banner.jpg'
-    }}
+  }}
+  fixed={false}
+  />
+```
+
+Without a journal background.
+
+```js
+const currentUser = {
+  admin: true,
+  user: {
+    username: 'cocojambo',
+    firstName: 'Alex',
+    lastName: 'Munteanu'
+  }
+};
+
+const HindawiLogo = () => <Logo
+  onClick={() => console.log('Hindawi best publish!')}
+  title="Hindawi"
+  src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Hindawi.svg/1200px-Hindawi.svg.png"
+/>;
+
+const MenuComponent = () => <AppBarMenu
+  currentUser={currentUser}
+  goTo={path => console.log(`navigating to ${path}`)}
+  logout={() => console.log('logging out')}
+  />;
+
+const AutosaveComponent = () => <div>AUTOSAVE</div>;
+
+<AppBar
+  autosave={AutosaveComponent}
+  logo={HindawiLogo}
+  menu={MenuComponent}
+  journal={{
+    name:'Chemistry Awesomeness',
+  }}
   fixed={false}
   />
 ```

packages/component-faraday-ui/src/AppBarMenu.js

+import React from 'react'
+import { get } from 'lodash'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import {
+  compose,
+  withProps,
+  withHandlers,
+  setDisplayName,
+  withStateHandlers,
+} from 'recompose'
+
+import Text from './Text'
+
+const AppBarMenu = ({
+  goTo,
+  logout,
+  expanded,
+  username,
+  toggleMenu,
+  currentUser,
+}) =>
+  currentUser ? (
+    <Root>
+      <User onClick={toggleMenu}>
+        <Text>{username}</Text>
+        <Icon secondary size={2}>
+          {expanded ? 'chevron-up' : 'chevron-down'}
+        </Icon>
+      </User>
+      {expanded && (
+        <Dropdown>
+          <DropdownOption onClick={goTo('/profile')}>My profile</DropdownOption>
+          {currentUser.admin && (
+            <DropdownOption onClick={goTo('/admin')}>
+              Admin dashboard
+            </DropdownOption>
+          )}
+          <DropdownOption onClick={logout}>Logout</DropdownOption>
+        </Dropdown>
+      )}
+      {expanded && <ToggleOverlay onClick={toggleMenu} />}
+    </Root>
+  ) : null
+
+export default compose(
+  withStateHandlers(
+    { expanded: false },
+    { toggleMenu: ({ expanded }) => () => ({ expanded: !expanded }) },
+  ),
+  withProps(({ currentUser }) => ({
+    username: get(
+      currentUser,
+      'user.firstName',
+      get(currentUser, 'user.username', 'User'),
+    ),
+  })),
+  withHandlers({
+    goTo: ({ toggleMenu, goTo }) => path => () => {
+      toggleMenu()
+      goTo(path)
+    },
+    logout: ({ logout, toggleMenu }) => () => {
+      toggleMenu()
+      logout()
+    },
+  }),
+  setDisplayName('AppBarMenu'),
+)(AppBarMenu)
+
+// #region styles
+const User = styled.div`
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+`
+const Dropdown = styled.div`
+  background-color: ${th('appBar.colorBackground')};
+  border-radius: ${th('borderRadius')};
+  box-shadow: ${th('boxShadow')};
+
+  position: absolute;
+  top: calc(${th('gridUnit')} * 4);
+  width: calc(${th('gridUnit')} * 18);
+  z-index: 10;
+`
+
+const DropdownOption = styled.div`
+  align-items: center;
+  color: ${th('colorText')};
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+
+  font-family: ${th('fontHeading')};
+  font-size: ${th('fontSizeBase')};
+  line-height: ${th('lineHeightBase')};
+
+  height: calc(${th('gridUnit')} * 2);
+  padding: ${th('gridUnit')};
+
+  &:hover {
+    background-color: ${th('colorFurniture')};
+  }
+`
+
+const Root = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  margin-left: ${th('gridUnit')};
+  position: relative;
+`
+
+const ToggleOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+`
+// #endregion

packages/component-faraday-ui/src/AppBarMenu.md

+App bar user menu.
+
+```js
+const currentUser = {
+  admin: true,
+  user: {
+    username: 'cocojambo',
+    firstName: 'Alex',
+    lastName: 'Munteanu'
+  }
+};
+
+<AppBarMenu
+  currentUser={currentUser}
+  goTo={path => console.log(`navigating to ${path}`)}
+  logout={() => console.log('logging out')}
+  />
+```

packages/hindawi-theme/src/elements/Icon.js

@@ -11,4 +11,5 @@ export default css`
     }
   }
   display: initial;
+  padding-top: 6px;
 `