Better

app/components/Dropdown.js

@@ -5,15 +5,16 @@ class Dropdown extends Component {
     super();
     this.state = {open: false};
   }
-  
+
   componentDidMount () {
     // Capture clicks outside the component and close the dropdown
+    // TODO: Remove this listener when component unmounts
     document.addEventListener('click', (e) => {
       if (!this.refs.container.contains(e.target)) {
         e.preventDefault();
         this.setState({open: false});
       }
-    })
+    });
   }
 
   handleClick (e) {
@@ -25,7 +26,10 @@ class Dropdown extends Component {
     const {initialValue, value} = this.props;
     return (
       <div ref="container"
-           className={'dropdown ' + (this.state.open ? 'dropdown--open' : '')}
+           className={'dropdown ' + 
+             (this.state.open ? 'dropdown--open ' : ' ') +
+             (this.props.right ? 'dropdown--right ' : ' ')
+           }
            onClick={this.handleClick.bind(this)}>
         {this.props.children}
       </div>
@@ -33,6 +37,8 @@ class Dropdown extends Component {
   }
 }
 
-Dropdown.propTypes = {};
+Dropdown.propTypes = {
+  right: PropTypes.bool
+};
 
 export default Dropdown;

app/components/RequestPane.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 import CodeEditor from '../components/CodeEditor'
 import UrlInput from '../components/UrlInput'
+import {METHOD_GET} from '../constants/global'
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
 // Don't inject component styles (use our own)
@@ -28,13 +29,13 @@ class RequestPane extends Component {
                     urlValue={request.url}/>
         </header>
         <div className="pane__body grid-v">
-          <Tabs selectedIndex={1} className="grid-v">
+          <Tabs selectedIndex={0} className="grid-v">
             <TabList className="pane__header grid">
               <Tab>
-                <button className="btn">Params</button>
+                <button className="btn">Body</button>
               </Tab>
               <Tab>
-                <button className="btn">Body</button>
+                <button className="btn">Params</button>
               </Tab>
               <Tab>
                 <button className="btn">Auth</button>
@@ -43,13 +44,13 @@ class RequestPane extends Component {
                 <button className="btn">Headers</button>
               </Tab>
             </TabList>
-            <TabPanel className="grid-v">Params</TabPanel>
             <TabPanel className="grid-v">
               <CodeEditor value={request.body}
                           className="grid-v"
                           onChange={updateRequestBody}
                           options={{mode: request._mode}}/>
             </TabPanel>
+            <TabPanel className="grid-v">Params</TabPanel>
             <TabPanel className="grid-v">Basic Auth</TabPanel>
             <TabPanel className="grid-v">Headers</TabPanel>
           </Tabs>

app/components/Sidebar.js

@@ -1,13 +1,24 @@
 import React, {PropTypes} from 'react'
+import Dropdown from '../components/Dropdown'
 
 const Sidebar = (props) => (
   <aside id="sidebar" className="pane">
     <header className="pane__header bg-primary">
       <h1>
-        <a href="#" className="pane__header__content">
-          {props.loading ? <i className="fa fa-refresh fa-spin pull-right"></i> : ''}
-          Insomnia
-        </a>
+        <Dropdown right={true}>
+          <a href="#" className="pane__header__content">
+            <i className="fa fa-angle-down pull-right"></i>
+            {props.loading ? <i className="fa fa-refresh fa-spin pull-right"></i> : ''}
+            Insomnia
+          </a>
+          <ul className="bg-super-light">
+            <li><a href="#">hello</a></li>
+            <li><a href="#">hello</a></li>
+            <li><a href="#">hello</a></li>
+            <li><a href="#">hello</a></li>
+            <li><a href="#">hello</a></li>
+          </ul>
+        </Dropdown>
       </h1>
     </header>
     <div className="pane__body grid-v hide-scrollbars">

app/css/components/dropdown.scss

@@ -9,11 +9,17 @@
     display: block;
   }
 
+  &.dropdown--right ul {
+    right: 0;
+    left: auto;
+  }
+
   ul {
     position: absolute;
+    left: 0;
     display: none;
     z-index: 10;
-    min-width: 180px;
+    width: 180px;
     border-radius: 2px;
     padding: 2px 0;
     margin-top: 4px;