feat(navigation): add user dropdown

packages/my-joy-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-joy-navigation",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "private": true,
   "license": "MPL-2.0",
   "main": "lib/index.js",

packages/my-joy-navigation/src/components/anchor.js

@@ -1,9 +1,10 @@
 import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
 
 export default emotion('a')`
   font-weight: 600;
-  line-height: 24px;
+  line-height: ${remcalc(24)};
-  font-size: 15px;
+  font-size: ${remcalc(15)};
   text-decoration: none;
   color: ${props => props.theme.text};
 

packages/my-joy-navigation/src/components/avatar.js

@@ -4,11 +4,7 @@ import remcalc from 'remcalc';
 
 const Img = emotion('img')`
   width: ${remcalc(24)};
+  border-radius: 50%;
 `;
 
-export default props => (
+export default props => <Img {...props} />;
-  <Img
-    {...props}
-    src="data:image/png;base64,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"
-  />
-);

packages/my-joy-navigation/src/components/index.js

@@ -33,4 +33,5 @@ export {
 
 export { default as Overlay } from './overlay';
 export { default as Anchor } from './anchor';
+export { default as Popover } from './popover';
 export { default as Sup } from './sup';

packages/my-joy-navigation/src/components/popover.js

@@ -0,0 +1,44 @@
+import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
+
+export default emotion('div')`
+    min-width: ${remcalc(180)};
+    right: ${remcalc(12)};
+    top: ${remcalc(46)};
+    display: flex;
+    justify-content: start;
+    position: absolute;
+    padding: ${remcalc(12)};
+    z-index: 20;
+    border-radius: ${remcalc(4)};
+    background: ${props => props.theme.white};
+    border: ${remcalc(1)} solid ${props => props.theme.grey};
+    box-sizing: border-box;
+    box-shadow: 0 ${remcalc(2)} ${remcalc(4)} rgba(0, 0, 0, 0.05);
+
+    &:after {
+      position: absolute;
+      content: '';
+      top: ${remcalc(-6)};
+      right: ${remcalc(12)};
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 ${remcalc(4.5)} ${remcalc(6)} ${remcalc(4.5)};
+      border-color: transparent transparent ${props =>
+        props.theme.white} transparent;
+    }
+
+    &:before {
+      position: absolute;
+      content: '';
+      top: ${remcalc(-7)};
+      right: ${remcalc(11)};
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 ${remcalc(5.5)} ${remcalc(7)} ${remcalc(5.5)};
+      border-color: transparent transparent ${props =>
+        props.theme.grey} transparent;
+    }
+`;

packages/my-joy-navigation/src/containers/account.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Anchor, Popover } from '../components';
+
+const Account = ({ expanded }) =>
+  expanded ? (
+    <Popover>
+      <Anchor href="/navigation/signout">Log Out</Anchor>
+    </Popover>
+  ) : null;
+
+export default Account;

packages/my-joy-navigation/src/containers/index.js

@@ -1,2 +1,3 @@
 export { default as Services } from './services';
 export { default as Datacenter } from './datacenter';
+export { default as Account } from './account';

packages/my-joy-navigation/src/header.js

@@ -40,13 +40,14 @@ const GetAccount = gql`
     }
     account {
       login
+      emailHash
     }
   }
 `;
 
 const Navigation = ({
-  account = {},
+  user = {},
-  datacenter = true,
+  datacenter,
   toggleSectionOpen,
   isOpen,
   activePanel
@@ -85,15 +86,18 @@ const Navigation = ({
         </HeaderItem>
       ) : null}
       {datacenter ? <HeaderDividerItem /> : null}
-      {account.login ? (
+      {user.login ? (
-        <HeaderItem>
+        <HeaderItem
+          onClick={() => toggleSectionOpen('account')}
+          active={isOpen && activePanel === 'account'}
+        >
           <HeaderItemContent>
             <HeaderItemSubContent>Account:</HeaderItemSubContent>
             <HeaderSpace />
-            {`${account.login}`}
+            {`${user.login}`}
           </HeaderItemContent>
           <HeaderItemIcon>
-            <Avatar />
+            <Avatar src={user.image} />
           </HeaderItemIcon>
         </HeaderItem>
       ) : null}
@@ -121,7 +125,12 @@ export default compose(
 
       const { name } = datacenter;
 
-      return { account, datacenter: name, loading, error };
+      const user = {
+        ...account,
+        image: `https://www.gravatar.com/avatar/${account.emailHash}`
+      };
+
+      return { user, datacenter: name, loading, error };
     }
   }),
   graphql(GetHeader, {