Add speed limit dropdown

client/source/scripts/components/action-bar/SortDropdown.js

@@ -11,7 +11,6 @@ const methodsToBind = [
 ];
 
 export default class SortDropdown extends React.Component {
-
   constructor() {
     super();
 
@@ -76,7 +75,6 @@ export default class SortDropdown extends React.Component {
         property: 'added'
       }
     ];
-
   }
 
   handleItemSelect(sortBy) {
@@ -101,11 +99,10 @@ export default class SortDropdown extends React.Component {
     return (
       <Dropdown
         handleItemSelect={this.handleItemSelect}
-        header={this.getDropdownHeader}
+        header={this.getDropdownHeader()}
         menuItems={this.getMenuItems()}
         selectedItem={this.props.selectedItem}
         />
     );
   }
-
 }

client/source/scripts/components/generic/Dropdown.js

@@ -12,7 +12,6 @@ const methodsToBind = [
 ];
 
 export default class SortDropdown extends React.Component {
-
   constructor() {
     super();
 
@@ -49,7 +48,7 @@ export default class SortDropdown extends React.Component {
     return (
       <div className="dropdown__content">
         <div className="dropdown__header">
-          {this.props.header()}
+          {this.props.header}
         </div>
         <ul className="dropdown__items">
           {menuItems}
@@ -95,7 +94,7 @@ export default class SortDropdown extends React.Component {
 
     return (
       <div className={classes} onClick={this.onDropdownClick}>
-        {this.props.header()}
+        {this.props.header}
         <CSSTransitionGroup
           transitionName="dropdown__content"
           transitionEnterTimeout={250}
@@ -105,5 +104,4 @@ export default class SortDropdown extends React.Component {
       </div>
     );
   }
-
 }

client/source/scripts/components/sidebar/SpeedLimitDropdown.js

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import Dropdown from '../generic/Dropdown';
+import Icon from '../icons/Icon';
+
+class Sidebar extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isEpanded: false
+    };
+  }
+
+  getDropdownHeader() {
+    return (
+      <button className="client-stats client-stat--limits">
+        <Icon icon="limits" /> Speed Limits
+      </button>
+    );
+  }
+
+  getMenuItems() {
+    return [
+      {
+        displayName: '1',
+        property: '1'
+      },
+      {
+        displayName: '2',
+        property: '2'
+      },
+      {
+        displayName: '3',
+        property: '3'
+      },
+      {
+        displayName: '4',
+        property: '4'
+      },
+      {
+        displayName: '5',
+        property: '5'
+      },
+      {
+        displayName: '6',
+        property: '6'
+      },
+      {
+        displayName: '7',
+        property: '7'
+      },
+      {
+        displayName: '8',
+        property: '8'
+      },
+      {
+        displayName: '9',
+        property: '9'
+      },
+      {
+        displayName: '10',
+        property: '10'
+      }
+    ];
+  }
+
+  render() {
+    return (
+      <div className="client-stats sidebar__item">
+        <Dropdown
+          handleItemSelect={this.handleItemSelect}
+          header={this.getDropdownHeader()}
+          menuItems={this.getMenuItems()}
+          selectedItem={'1'}
+          />
+      </div>
+    );
+  }
+}
+
+export default Sidebar;