Team switcher

server/pages/components/Navigation.js

@@ -1,8 +1,10 @@
 // @flow
 import * as React from 'react';
+import { sortBy } from 'lodash';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import Centered from './Centered';
+import TeamLogo from '../../../shared/components/TeamLogo';
 import {
   developers,
   changelog,
@@ -13,7 +15,18 @@ import {
   spectrumUrl,
 } from '../../../shared/utils/routeHelpers';
 
-function TopNavigation() {
+type Sessions = {
+  [subdomain: string]: {
+    name: string,
+    logo: string,
+    expires: string,
+    url: string,
+  },
+};
+
+function TopNavigation({ sessions }: { sessions: ?Sessions }) {
+  const orderedSessions = sortBy(sessions, 'name');
+
   return (
     <Nav>
       <Brand href={process.env.URL}>Outline</Brand>
@@ -33,9 +46,25 @@ function TopNavigation() {
         <MenuItem>
           <a href={developers()}>API</a>
         </MenuItem>
-        <MenuItem>
-          <a href="/#signin">Sign In</a>
-        </MenuItem>
+        {orderedSessions.length ? (
+          <MenuItem highlighted>
+            <a href={developers()}>Your Teams</a>
+            <ol>
+              {orderedSessions.map(session => (
+                <MenuItem key={session.url}>
+                  <a href={`${session.url}/dashboard`}>
+                    <TeamLogo src={session.logo} width={20} height={20} />
+                    {session.name}
+                  </a>
+                </MenuItem>
+              ))}
+            </ol>
+          </MenuItem>
+        ) : (
+          <MenuItem>
+            <a href="/#signin">Sign In</a>
+          </MenuItem>
+        )}
       </Menu>
     </Nav>
   );
@@ -74,13 +103,8 @@ const MenuLinkStyle = props => `
   }
 `;
 
-const Menu = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-
 const MenuItem = styled.li`
+  position: relative;
   display: inline-block;
   margin: 0 0 0 40px;
 
@@ -89,6 +113,33 @@ const MenuItem = styled.li`
   }
 
   ${MenuLinkStyle};
+
+  ${props =>
+    props.highlighted &&
+    `
+  position: relative;
+  border: 2px solid ${props.theme.slate};
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin-top: -6px;
+  margin-bottom: -6px;
+
+  &:hover {
+    border: 2px solid ${props.theme.slateDark};
+
+    > a {
+      color: ${props.theme.slateDark};
+    }
+  }
+
+  > a:hover {
+    text-decoration: none;
+  }
+  `};
+
+  &:hover ol {
+    display: block;
+  }
 `;
 
 const MenuItemDesktop = styled(MenuItem)`
@@ -99,6 +150,42 @@ const MenuItemDesktop = styled(MenuItem)`
   `};
 `;
 
+const Menu = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  ol {
+    display: none;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    right: 0;
+    top: 32px;
+
+    background: #fff;
+    border-radius: 4px;
+    min-width: 160px;
+    padding: 0 0.5em;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
+      0 2px 4px rgba(0, 0, 0, 0.08);
+
+    ${MenuItem} {
+      padding: 0.5em 0;
+      margin: 0;
+    }
+
+    ${MenuItem} a {
+      display: flex;
+      align-items: center;
+    }
+
+    ${TeamLogo} {
+      margin-right: 0.5em;
+    }
+  }
+`;
+
 const Nav = styled(Centered)`
   display: flex;
   padding: 20px 0;