Introduce UserNavBlock component to handle authenticated user actions

ui/src/side_nav/components/UserNavBlock.js

@@ -0,0 +1,63 @@
+import React, {PropTypes, Component} from 'react'
+import {connect} from 'react-redux'
+
+class UserNavBlock extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {logoutLink, customLinks, me} = this.props
+
+    return (
+      <div className="sidebar--item">
+        <div className="sidebar--square">
+          <div className="sidebar--icon icon user" />
+        </div>
+        <div className="sidebar-menu">
+          <div className="sidebar-menu--heading">
+            {me.name}
+          </div>
+          <div className="sidebar-menu--section">Organizations</div>
+          <a className="sidebar-menu--item active" href="#">
+            OrganizationName1 <strong>(Viewer)</strong>
+          </a>
+          <a className="sidebar-menu--item" href="#">
+            OrganizationName2 <strong>(Editor)</strong>
+          </a>
+          <a className="sidebar-menu--item" href={logoutLink}>
+            Logout
+          </a>
+          {customLinks ? <div className="sidebar-menu--divider" /> : null}
+          {customLinks
+            ? <div className="sidebar-menu--section">Custom Links</div>
+            : null}
+          {customLinks
+            ? customLinks.map((link, i) =>
+                <a key={i} className="sidebar-menu--item" href={link.url}>
+                  {link.name}
+                </a>
+              )
+            : null}
+          <div className="sidebar-menu--triangle" />
+        </div>
+      </div>
+    )
+  }
+}
+
+const {array, shape, string} = PropTypes
+
+UserNavBlock.propTypes = {
+  customLinks: array,
+  logoutLink: string.isRequired,
+  me: shape({
+    name: string.isRequired,
+  }),
+}
+
+const mapStateToProps = ({auth: {me}}) => ({
+  me,
+})
+
+export default connect(mapStateToProps)(UserNavBlock)

ui/src/side_nav/containers/SideNav.js

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 
 import Authorized, {ADMIN_ROLE} from 'src/auth/Authorized'
 
+import UserNavBlock from 'src/side_nav/components/UserNavBlock'
 import {
   NavBar,
   NavBlock,
@@ -34,31 +35,6 @@ const SideNav = React.createClass({
     ),
   },
 
-  renderUserMenuBlockWithCustomLinks(customLinks, logoutLink) {
-    return [
-      <NavHeader key={0} title="User" />,
-      ...customLinks
-        .sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase())
-        .map(({name, url}, i) =>
-          <NavListItem
-            key={i + 1}
-            useAnchor={true}
-            isExternal={true}
-            link={url}
-          >
-            {name}
-          </NavListItem>
-        ),
-      <NavListItem
-        key={customLinks.length + 1}
-        useAnchor={true}
-        link={logoutLink}
-      >
-        Logout
-      </NavListItem>,
-    ]
-  },
-
   render() {
     const {
       params: {sourceID},
@@ -152,18 +128,7 @@ const SideNav = React.createClass({
             />
           </NavBlock>
           {isUsingAuth
-            ? <NavBlock icon="user" location={location}>
-                {customLinks
-                  ? this.renderUserMenuBlockWithCustomLinks(
-                      customLinks,
-                      logoutLink
-                    )
-                  : <NavHeader
-                      useAnchor={true}
-                      link={logoutLink}
-                      title="Logout"
-                    />}
-              </NavBlock>
+            ? <UserNavBlock logoutLink={logoutLink} customLinks={customLinks} />
             : null}
         </NavBar>
   },

ui/src/style/layout/sidebar.scss

@@ -151,6 +151,7 @@ $sidebar-menu--gutter: 18px;
     cursor: pointer;
   }
 }
+.sidebar-menu--item,
 .sidebar-menu--item:link,
 .sidebar-menu--item:active,
 .sidebar-menu--item:visited {
@@ -163,13 +164,15 @@ $sidebar-menu--gutter: 18px;
   transition: none;
 
   // Rounding bottom outside corner of match container
-  &:last-child {border-bottom-right-radius: $radius;}
+  &:nth-last-child(2) {border-bottom-right-radius: $radius;}
 }
+.sidebar-menu--item.active,
 .sidebar-menu--item.active:link,
 .sidebar-menu--item.active:active,
 .sidebar-menu--item.active:visited {
   @include gradient-h($sidebar-menu--item-bg,$sidebar-menu--item-bg-accent);
   color: $sidebar-menu--item-text-active;
+  font-weight: 700;
 }
 .sidebar-menu--item:hover,
 .sidebar-menu--item.active:hover {
@@ -188,6 +191,9 @@ $sidebar-menu--gutter: 18px;
   font-weight: 400;
   padding: 0px $sidebar-menu--gutter;
 }
+.sidebar-menu--item > strong {
+  opacity: 0.6;
+}
 // Invisible triangle for easier mouse movement when navigating to sub items
 .sidebar-menu--item + .sidebar-menu--triangle {
   position: absolute;
@@ -198,3 +204,17 @@ $sidebar-menu--gutter: 18px;
   left: 0px;
   transform: translate(-50%,-50%) rotate(45deg);
 }
+.sidebar-menu--divider {
+  width: 100%;
+  height: 2px;
+  @include gradient-h($c-laser,$c-potassium);
+}
+.sidebar-menu--section {
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 22px;
+  font-weight: 600;
+  padding: 4px $sidebar-menu--gutter;
+  text-transform: uppercase;
+  color: $c-hydrogen;
+}