Complete refactor of sidenav

- Reduced DOM complexity
- Less styles overall
- Added an icon in the navbar to show version number
- Still needs an eslint ignore
pull/10616/head
Alex P 2017-06-22 16:30:28 -07:00
parent 5724aed904
commit 0f0805a2f0
3 changed files with 11 additions and 7 deletions

View File

@ -35,10 +35,6 @@ const NavHeader = React.createClass({
render() { render() {
const {link, title, useAnchor} = this.props const {link, title, useAnchor} = this.props
if (!link) {
return <div className="sidebar-menu--heading">{title}</div>
}
// Some nav items, such as Logout, need to hit an external link rather // Some nav items, such as Logout, need to hit an external link rather
// than simply route to an internal page. Anchor tags serve that purpose. // than simply route to an internal page. Anchor tags serve that purpose.
return useAnchor return useAnchor

View File

@ -83,9 +83,16 @@ const SideNav = React.createClass({
/> />
</NavBlock> </NavBlock>
<div className="sidebar--bottom"> <div className="sidebar--bottom">
<NavBlock icon="heart"> <div className="sidebar--item">
<NavHeader title="Woogles" /> <div className="sidebar--square">
</NavBlock> <span className="sidebar--icon icon zap" />
</div>
<div className="sidebar-menu">
<div className="sidebar-menu--heading">
Version: {VERSION}{/* eslint no-undef */}
</div>
</div>
</div>
{showLogout {showLogout
? <NavBlock icon="user" className="sidebar--item-last"> ? <NavBlock icon="user" className="sidebar--item-last">
<NavHeader <NavHeader

View File

@ -151,6 +151,7 @@ $sidebar-menu--gutter: 18px;
@include gradient-h($sidebar-menu--item-bg-hover,$sidebar-menu--item-bg-hover-accent); @include gradient-h($sidebar-menu--item-bg-hover,$sidebar-menu--item-bg-hover-accent);
color: $sidebar-menu--item-text-hover; color: $sidebar-menu--item-text-hover;
} }
.sidebar-menu--heading,
.sidebar-menu--heading:link, .sidebar-menu--heading:link,
.sidebar-menu--heading:visited, .sidebar-menu--heading:visited,
.sidebar-menu--heading:active, .sidebar-menu--heading:active,