Hide settings on any click outside it when open

Author: insin

public/style.css

@@ -1,5 +1,6 @@
 body {
   background-color: #fff;
+  margin: 0;
 }
 form {
   margin: 0;
@@ -52,10 +53,11 @@ span.control:hover {
   }
 }
 
-.App {
+.App__wrap {
   width: 90%;
   max-width: 1280px;
   margin: 0 auto;
+  padding: 8px 0;
   color: #000;
   background-color: #f5f5f5;
   font-size: 13.3333px;

src/Settings.jsx

@@ -15,8 +15,12 @@ var Settings = React.createClass({
     SettingsStore.save()
   },
 
+  onClick(e) {
+    e.stopPropagation()
+  },
+
   render() {
-    return <div ref="container" className="Settings" tabIndex="-1">
+    return <div ref="container" className="Settings" tabIndex="-1" onClick={this.onClick}>
       <form onChange={this.onChange}>
         <div className="Settings__setting Settings__setting--checkbox">
           <label htmlFor="autoCollapse">

src/app.jsx

@@ -52,7 +52,8 @@ var App = React.createClass({
   },
 
   render() {
-    return <div className="App">
+    return <div className="App" onClick={this.state.showSettings && this.toggleSettings}>
+      <div className="App__wrap">
       <div className="App__header">
         <img src="logo.png" width="16" height="16" alt="" />{' '}
         <Link to="news" className="App__homelink">React HN</Link>{' '}
@@ -69,6 +70,7 @@ var App = React.createClass({
       <div className="App__footer">
         react-hn v{process.env.VERSION} | <a href="https://github.com/insin/react-hn">insin/react-hn</a>
       </div>
+      </div>
     </div>
   }
 })