'use strict';

(function () {

  var React = require('react');
  var docs = require('../docs');
  var LinkHeader = require('./link-header');

  var Sidebar = React.createClass({
    getInitialState: function () {
      return {
        open: false
      };
    },

    getClassName: function () {
      return 'sidebar' +
        (this.props.javascript ? ' with-search' : '') +
        (this.state.open ? ' open' : '');
    },

    toggleSidebar: function () {
      this.setState({
        open: !this.state.open
      });
    },

    render: function () {
      var javascript = this.props.javascript;

      return (
        <span id="sidebar">
          {
            javascript && (
              <div className="sidebar-toggle" onClick={this.onToggleSidebar}>
                <span />
              </div>
            )
          }
          {
            javascript && (
              <div
                className={'sidebar-overlay' + (this.state.open ? ' open' : '')}
                onClick={this.onToggleSidebar}
              />
            )
          }
          <div className={this.getClassName()}>
            {
              javascript && (
                <div className="input-wrapper">
                  <input type="text" placeholder="Search for a method..." />
                </div>
              )
            }
            <ul className="scrollable">
              {
                docs.map(function (group) {
                  return (
                    <LinkHeader
                      noId
                      type="li"
                      header={group.name}
                      key={group.name}
                    >
                      <ul>
                        {
                          group.methods.map(function (method) {
                            return (
                              <LinkHeader
                                noId
                                type="li"
                                header={method.name}
                                key={method.name}
                              />
                            );
                          })
                        }
                      </ul>
                    </LinkHeader>
                  );
                })
              }
            </ul>
          </div>
        </span>
      );
    }
  });

  module.exports = Sidebar;

})();

@@ -521,24 +521,177 @@
 %7D);%0A    %7D,%0A%0A
+    onSidebarToggleClick: function () %7B%0A      this.toggleSidebar();%0A    %7D,%0A%0A    onSidebarOverlayClick: function () %7B%0A      this.toggleSidebar();%0A    %7D,%0A%0A
     render: 
@@ -700,24 +700,24 @@
 nction () %7B%0A
-
       var ja
@@ -896,29 +896,34 @@
 %7Bthis.on
-Toggle
 Sidebar
+ToggleClick
 %7D%3E%0A     
@@ -1165,21 +1165,27 @@
 s.on
-Toggle
 Sidebar
+OverlayClick
 %7D%0A  

Fix sidebar toggling