Let user's toggle playlist menus

js/components/PlaylistWindow/MiscMenu.js

@@ -1,16 +1,14 @@
 import React from "react";
 import { connect } from "react-redux";
 import { FILE_INFO } from "../../actionTypes";
+import PlaylistMenu from "./PlaylistMenu";
 
 const MiscMenu = props => (
-  <div id="playlist-misc-menu" className="playlist-menu selected">
-    <div className="bar" />
-    <ul>
-      <li className="sort-list" />
-      <li className="file-info" onClick={props.fileInfo} />
-      <li className="misc-options" />
-    </ul>
-  </div>
+  <PlaylistMenu id="playlist-misc-menu">
+    <li className="sort-list" />
+    <li className="file-info" onClick={props.fileInfo} />
+    <li className="misc-options" />
+  </PlaylistMenu>
 );
 
 const mapDispatchToProps = {

js/components/PlaylistWindow/PlaylistMenu.js

@@ -0,0 +1,42 @@
+import React from "react";
+import classnames from "classnames";
+
+export default class PlaylistMenu extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { selected: false };
+    this._handleClick = this._handleClick.bind(this);
+  }
+
+  _handleClick(e) {
+    const { target } = e;
+    this.setState({ selected: !this.state.selected });
+    const handleClickOut = ee => {
+      if (!target.contains(ee.target)) {
+        this.setState({ selected: false });
+        ee.stopPropagation();
+      }
+      window.document.removeEventListener("click", handleClickOut, {
+        capture: true
+      });
+    };
+    window.document.addEventListener("click", handleClickOut, {
+      capture: true
+    });
+  }
+
+  render() {
+    return (
+      <div
+        id={this.props.id}
+        className={classnames("playlist-menu", {
+          selected: this.state.selected
+        })}
+        onClick={this._handleClick}
+      >
+        <div className="bar" />
+        <ul>{this.props.children}</ul>
+      </div>
+    );
+  }
+}

js/components/PlaylistWindow/RemoveMenu.js

@@ -5,17 +5,15 @@ import {
   CROP_TRACKS,
   REMOVE_SELECTED_TRACKS
 } from "../../actionTypes";
+import PlaylistMenu from "./PlaylistMenu";
 
 const RemoveMenu = props => (
-  <div id="playlist-remove-menu" className="playlist-menu selected">
-    <div className="bar" />
-    <ul>
-      <li className="remove-misc" onClick={props.removeSelected} />
-      <li className="remove-all" onClick={props.removeAll} />
-      <li className="crop" onClick={props.crop} />
-      <li className="remove-selected" onClick={props.removeSelected} />
-    </ul>
-  </div>
+  <PlaylistMenu id="playlist-remove-menu">
+    <li className="remove-misc" onClick={props.removeSelected} />
+    <li className="remove-all" onClick={props.removeAll} />
+    <li className="crop" onClick={props.crop} />
+    <li className="remove-selected" onClick={props.removeSelected} />
+  </PlaylistMenu>
 );
 
 const mapDispatchToProps = {

js/components/PlaylistWindow/SelectionMenu.js

@@ -1,16 +1,14 @@
 import React from "react";
 import { connect } from "react-redux";
 import { SELECT_ALL, SELECT_ZERO, INVERT_SELECTION } from "../../actionTypes";
+import PlaylistMenu from "./PlaylistMenu";
 
 const SelectionMenu = props => (
-  <div id="playlist-selection-menu" className="playlist-menu selected">
-    <div className="bar" />
-    <ul>
-      <li className="invert-selection" onClick={props.invertSelection} />
-      <li className="select-zero" onClick={props.selectZero} />
-      <li className="select-all" onClick={props.selectAll} />
-    </ul>
-  </div>
+  <PlaylistMenu id="playlist-selection-menu">
+    <li className="invert-selection" onClick={props.invertSelection} />
+    <li className="select-zero" onClick={props.selectZero} />
+    <li className="select-all" onClick={props.selectAll} />
+  </PlaylistMenu>
 );
 
 const mapDispatchToProps = {

js/components/PlaylistWindow/__snapshots__/index.test.js.snap

@@ -302,8 +302,36 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
       className="playlist-bottom-left draggable"
     >
       <div
-        className="playlist-menu selected"
+        className="playlist-menu"
+        id="playlist-remove-menu"
+        onClick={[Function]}
+      >
+        <div
+          className="bar"
+        />
+        <ul>
+          <li
+            className="remove-misc"
+            onClick={[Function]}
+          />
+          <li
+            className="remove-all"
+            onClick={[Function]}
+          />
+          <li
+            className="crop"
+            onClick={[Function]}
+          />
+          <li
+            className="remove-selected"
+            onClick={[Function]}
+          />
+        </ul>
+      </div>
+      <div
+        className="playlist-menu"
         id="playlist-selection-menu"
+        onClick={[Function]}
       >
         <div
           className="bar"