Doc Site - moved dropdown menu to its own page

docs/src/app/app-routes.jsx

@@ -19,6 +19,7 @@ var React = require('react'),
 
   Buttons = require('./components/pages/components/buttons.jsx'),
   Dialog = require('./components/pages/components/dialog.jsx'),
+  DropDownMenu = require('./components/pages/components/drop-down-menu.jsx'),
   Icons = require('./components/pages/components/icons.jsx'),
   Inputs = require('./components/pages/components/inputs.jsx'),
   LeftNav = require('./components/pages/components/left-nav.jsx'),
@@ -35,6 +36,7 @@ var React = require('react'),
   componentsMenuItems = [
     { route: 'buttons', text: 'Buttons'},
     { route: 'dialog', text: 'Dialog'},
+    { route: 'dropdown-menu', text: 'Dropdown Menu'},
     { route: 'icons', text: 'Icons'},
     { route: 'inputs', text: 'Inputs'},
     { route: 'menus', text: 'Menus'},
@@ -59,6 +61,7 @@ var AppRoutes = (
       <Route name="components" handler={PageWithNav} menuItems={componentsMenuItems} pageTitle="Components">
         <Route name="buttons" handler={Buttons} />
         <Route name="dialog" handler={Dialog} />
+        <Route name="dropdown-menu" handler={DropDownMenu} />
         <Route name="icons" handler={Icons} />
         <Route name="inputs" handler={Inputs} />
         <Route name="left-nav" handler={LeftNav} />

docs/src/app/components/pages/components/drop-down-menu.jsx

@@ -0,0 +1,48 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react'),
+  mui = require('mui'),
+  CodeExample = require('../../code-example/code-example.jsx'),
+
+  menuItems = [
+    { payload: '1', text: 'Never' },
+    { payload: '2', text: 'Every Night' },
+    { payload: '3', text: 'Weeknights' },
+    { payload: '4', text: 'Weekends' },
+    { payload: '5', text: 'Weekly' },
+  ];
+
+var MenusPage = React.createClass({
+
+  render: function() {
+    return (
+      <div>
+        <h2 className="mui-font-style-headline">Drop Down Menu</h2>
+        {this._getDropDownMenuExample()}
+      </div>
+    );
+  },
+
+  _getDropDownMenuExample: function() {
+    var code = 
+      "var menuItems = [\n" +
+      "   { payload: '1', text: 'Never' },\n" +
+      "   { payload: '2', text: 'Every Night' },\n" +
+      "   { payload: '3', text: 'Weeknights' },\n" +
+      "   { payload: '4', text: 'Weekends' },\n" +
+      "   { payload: '5', text: 'Weekly' },\n" +
+      "];\n\n" +
+      "<DropDownMenu menuItems={menuItems} />";
+
+    return (
+      <CodeExample code={code}>
+        <mui.DropDownMenu menuItems={menuItems} onChange={this._onDropDownMenuChange} />
+      </CodeExample>
+    );
+  }
+
+});
+
+module.exports = MenusPage;

docs/src/app/components/pages/components/menus.jsx

@@ -6,14 +6,6 @@ var React = require('react'),
   mui = require('mui'),
   CodeExample = require('../../code-example/code-example.jsx'),
 
-  menuItems = [
-    { payload: '1', text: 'Never' },
-    { payload: '2', text: 'Every Night' },
-    { payload: '3', text: 'Weeknights' },
-    { payload: '4', text: 'Weekends' },
-    { payload: '5', text: 'Weekly' },
-  ],
-
   labelMenuItems = [
     { payload: '1', text: 'ID', data: '1234567890', icon: 'home' },
     { payload: '2', text: 'Type', data: 'Announcement', icon: 'home' },
@@ -72,9 +64,6 @@ var MenusPage = React.createClass({
   render: function() {
     return (
     	<div>
-    		<h2 className="mui-font-style-headline">Drop Down Menu</h2>
-    		{this._getDropDownMenuExample()}
-
         <h2 className="mui-font-style-headline">Label Menu</h2>
         {this._getLabelMenuExample()}
 
@@ -93,24 +82,6 @@ var MenusPage = React.createClass({
     );
   },
 
-  _getDropDownMenuExample: function() {
-    var code = 
-      "var menuItems = [\n" +
-      "   { payload: '1', text: 'Never' },\n" +
-      "   { payload: '2', text: 'Every Night' },\n" +
-      "   { payload: '3', text: 'Weeknights' },\n" +
-      "   { payload: '4', text: 'Weekends' },\n" +
-      "   { payload: '5', text: 'Weekly' },\n" +
-      "];\n\n" +
-      "<DropDownMenu menuItems={menuItems} />";
-
-    return (
-      <CodeExample code={code}>
-        <mui.DropDownMenu menuItems={menuItems} onChange={this._onDropDownMenuChange} />
-      </CodeExample>
-    );
-  },
-
   _getLabelMenuExample: function() {
     var code = 
       "var labelMenuItems = [\n" +
@@ -223,10 +194,6 @@ var MenusPage = React.createClass({
     );
   },
 
-  _onDropDownMenuChange: function(e, key, menuItem) {
-  	console.log('Menu Clicked: ', menuItem);
-  },
-
   _onFilterMenuToggle: function(e, key, menuItem, toggled) {
     console.log('Filter Menu Toggled: ', key, menuItem, toggled)
   },