diff --git a/ui/src/side_nav/components/UserNavBlock.js b/ui/src/side_nav/components/UserNavBlock.js
new file mode 100644
index 0000000000..60cc67c734
--- /dev/null
+++ b/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 (
+
+ )
+ }
+}
+
+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)
diff --git a/ui/src/side_nav/containers/SideNav.js b/ui/src/side_nav/containers/SideNav.js
index 71f5f7e626..fe30371663 100644
--- a/ui/src/side_nav/containers/SideNav.js
+++ b/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 [
- ,
- ...customLinks
- .sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase())
- .map(({name, url}, i) =>
-
- {name}
-
- ),
-
- Logout
- ,
- ]
- },
-
render() {
const {
params: {sourceID},
@@ -152,18 +128,7 @@ const SideNav = React.createClass({
/>
{isUsingAuth
- ?
- {customLinks
- ? this.renderUserMenuBlockWithCustomLinks(
- customLinks,
- logoutLink
- )
- : }
-
+ ?
: null}
},
diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss
index 5ff2503fa5..26261ad99c 100644
--- a/ui/src/style/layout/sidebar.scss
+++ b/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;
+}