Reorder project

docs/app/components/layout/main/components/appbar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { AppBar, Button } from 'react-toolbox';
 import { Link } from 'react-router';
-import Logo from '../../logo';
-import Navigation from '../../navigation';
-import PlaygroundArea from './playground_area';
+import Logo from '../../../logo';
+import Navigation from '../../../navigation';
+import PlaygroundArea from '../playground_area';
 import style from './appbar.scss';
 
 class MainAppBar extends React.Component {

docs/app/components/layout/main/components/appbar.scss

@@ -1,4 +1,4 @@
-@import "../../globals";
+@import "../../../globals";
 @import "~react-toolbox/app_bar/config";
 @import "~react-toolbox/button/config";
 

docs/app/components/layout/main/components/documentation.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ToolboxComponents from './components';
-import style from './component.scss';
+import components from '../modules/components';
+import style from './documentation.scss';
 
 const Component = (props) => {
-  const html = { __html: ToolboxComponents[props.params.component].docs };
+  const html = { __html: components[props.params.component].docs };
   return (
     <div
       className={style.documentation}

docs/app/components/layout/main/components/drawer_components.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import ToolboxComponents from './components';
 import { History } from 'react-router';
 import { List, ListItem } from 'react-toolbox';
-import style from './drawer.scss';
+import style from './drawer_components.scss';
+import components from '../modules/components';
 
 const MainDrawer = React.createClass({
   mixins: [History],
 
   renderDrawerItems () {
-    return Object.keys(ToolboxComponents).map((key) => {
-      const ToolboxComponent = ToolboxComponents[key];
+    return Object.keys(components).map((key) => {
+      const ToolboxComponent = components[key];
       const to = this.context.history.createHref(ToolboxComponent.path);
       let className = style.item;
       if (this.context.history.isActive(ToolboxComponent.path)) {

docs/app/components/layout/main/components/drawer_components.scss

@@ -1,4 +1,4 @@
-@import "../../globals";
+@import "../../../globals";
 
 $drawer-h-offset: 2.4 * $unit;
 $drawer-v-offset: 1.2 * $unit;

docs/app/components/layout/main/components/drawer_playground.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button, Drawer } from 'react-toolbox';
-import style from './playground_area.scss';
+import style from './drawer_playground.scss';
 import Playground from '../../playground';
-import code from '../../../examples/example.txt';
+import code from '../../../../examples/example.txt';
 
 class PlaygroundArea extends React.Component {
   render () {

docs/app/components/layout/main/components/drawer_playground.scss

@@ -0,0 +1,5 @@
+@import "../../../globals";
+
+.drawer > aside {
+  width: 50vw;
+}

docs/app/components/layout/main/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import MainAppBar from './appbar';
-import MainDrawer from './drawer';
+import Appbar from './components/appbar';
+import DrawerComponents from './components/drawer_components';
 import style from './style';
 
 const Main = (props) => {
   return (
     <div>
-      <MainAppBar />
+      <Appbar />
       <section className={style.content}>
-        <MainDrawer />
+        <DrawerComponents />
         { props.children }
       </section>
     </div>

docs/app/components/layout/main/playground_area.scss

@@ -1,5 +0,0 @@
-@import "../../globals";
-
-.drawer > aside {
-  width: 60%;
-}

docs/app/routes.jsx

@@ -3,14 +3,14 @@ import { App } from 'react-toolbox';
 import { Route, IndexRoute } from 'react-router';
 import Home from './components/layout/home';
 import Main from './components/layout/main';
-import Playground from './components/layout/main/playground';
-import Component from './components/layout/main/component';
+import Playground from './components/layout/playground';
+import Documentation from './components/layout/main/components/documentation';
 
 const routes = (
   <Route component={App}>
     <Route path="/" component={Home} />
     <Route component={Main}>
-      <Route path="/components/:component" component={Component} />
+      <Route path="/components/:component" component={Documentation} />
       <Route path="/playground" component={Playground} />
     </Route>
     <IndexRoute component={Home}/>