Add SidebarMenu component that manages its own open/closed state

client/reader/sidebar/menu.jsx

@@ -0,0 +1,89 @@
+/**
+ * External Dependencies
+ */
+const React = require( 'react' ),
+	classNames = require( 'classnames' );
+
+/**
+ * Internal Dependencies
+ */
+const Gridicon = require( 'components/gridicon' ),
+	Count = require( 'components/count' );
+
+const SidebarMenu = React.createClass( {
+
+	propTypes: {
+		title: React.PropTypes.oneOfType( [ React.PropTypes.string, React.PropTypes.element ] ).isRequired,
+		count: React.PropTypes.integer
+	},
+
+	getInitialState: function() {
+		return {
+			expanded: this.props.expanded
+		};
+	},
+
+	getDefaultProps: function() {
+		return {
+			expanded: false
+		};
+	},
+
+	onClick: function() {
+		if ( this.props.children ) {
+			this.setState( { expanded: ! this.state.expanded } );
+		}
+	},
+
+	getClickAction: function() {
+		if ( this.props.disabled ) {
+			return;
+		}
+		return this.onClick;
+	},
+
+	renderContent: function() {
+		return (
+			<div className="sidebar-menu__list">
+				{ this.props.children }
+			</div>
+		);
+	},
+
+	renderHeader: function() {
+		const headerClasses = classNames( 'sidebar-menu__header' );
+		return (
+			<div className={ headerClasses } onClick={ this.onClick }>
+				<h2 className="sidebar-heading">
+						<Gridicon icon="chevron-down" />
+						<span>{ this.props.title }</span>
+						{ this.props.count
+							? <Count count={ this.props.count } />
+							: null
+						}
+				</h2>
+			</div>
+		);
+	},
+
+	render: function() {
+		const classes = classNames(
+			'sidebar-menu',
+			this.props.className,
+			{
+				'is-toggle-open': !! this.state.expanded,
+				'is-togglable': true,
+				'is-dynamic': true
+			}
+		);
+
+		return (
+			<li className={ classes }>
+				{ this.renderHeader() }
+				{ this.renderContent() }
+			</li>
+		);
+	}
+} );
+
+module.exports = SidebarMenu;

client/reader/sidebar/sidebar.jsx

@@ -28,7 +28,8 @@ const layoutFocus = require( 'lib/layout-focus' ),
 	Gridicon = require( 'components/gridicon' ),
 	Button = require( 'components/button' ),
 	Count = require( 'components/count' ),
-	config = require( 'config' );
+	config = require( 'config' ),
+	SidebarMenu = require( './menu' );
 
 module.exports = React.createClass( {
 	displayName: 'ReaderSidebar',
@@ -352,12 +353,12 @@ module.exports = React.createClass( {
 			tagCount = 0,
 			listCount = 0;
 
-		if ( typeof this.state.tags !== "undefined" && this.state.tags !== null && this.state.tags.length > 0 ) {
+		if ( typeof this.state.tags !== 'undefined' && this.state.tags !== null && this.state.tags.length > 0 ) {
 			isTags = true;
 			tagCount = this.state.tags.length;
 		}
 
-		if ( typeof this.state.lists !== "undefined" && this.state.lists !== null && this.state.lists.length > 0 ) {
+		if ( typeof this.state.lists !== 'undefined' && this.state.lists !== null && this.state.lists.length > 0 ) {
 			isLists = true;
 			listCount = this.state.lists.length;
 		}
@@ -442,11 +443,17 @@ module.exports = React.createClass( {
 					<ul className="sidebar-menu__list">
 						{
 							// There's got to be a better way to do this...
+							// - we could check the list count in renderLists, then render
+							// the empty list message if it's zero?
 							isLists
 							? this.renderLists()
 							: this.renderEmptyList()
 						}
 					</ul>
+
+					<SidebarMenu title={ this.translate( 'Lists' ) } count={ listCount }>
+						{ this.renderLists() }
+					</SidebarMenu>
 				</li>
 
 				<li className={ tagsClassNames }>