move sidebar into CMS

docs/index.js

@@ -29,33 +29,18 @@ class CMSExample extends React.Component {
     return (
       <Router>
         <Route path="/docs" render={({history}) => {
-          return <Layout>
-            <Layout.Sider>
-              <Menu>
-                {
-                  Object.keys(schema.schema).map(key => (
-                    <Menu.Item key={key}>
-                      <Link to={`${baseUrl}/${key}`}>
-                        {schema.schema[key].title}
-                      </Link>
-                    </Menu.Item>
-                  ))
-                }
-              </Menu>
-            </Layout.Sider>
-            <Layout.Content>
-              <RouteProvider
-                history={history}
-                baseUrl={baseUrl}
-              >
-                <CMS
-                  schema={schema}
-                  afterDeploy={this.afterDeploy}
-                  dataDidChange={this.dataDidChange}
-                />
-              </RouteProvider>
-            </Layout.Content>
-          </Layout>;
+          return (
+            <RouteProvider
+              history={history}
+              baseUrl={baseUrl}
+            >
+              <CMS
+                schema={schema}
+                afterDeploy={this.afterDeploy}
+                dataDidChange={this.dataDidChange}
+              />
+            </RouteProvider>
+          );
         }}/>
       </Router>
     );

src/components/Sidebar.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import {Layout, Menu} from 'antd';
+
+
+export default class Sidebar extends React.Component {
+  render() {
+    const {sidebar, goTo} = this.props;
+    return (
+      <Layout.Sider>
+        <Menu>
+          {
+            sidebar.map(item => {
+              if (item.to) {
+                return renderMenuItem(item, goTo);
+              }
+              return renderSubMenu(item, goTo);
+            })
+          }
+        </Menu>
+      </Layout.Sider>
+    );
+  }
+}
+
+function renderMenuItem(item, goTo) {
+  return (
+    <Menu.Item key={item.title}>
+      <a href="javascript;" onClick={() => goTo(item.to)}>
+        {item.title}
+      </a>
+    </Menu.Item>
+  )
+}
+
+function renderSubMenu(item, goTo) {
+  return (
+    <Menu.SubMenu key={item.title}>
+      {
+        item.items.map(i => renderMenuItem(i, goTo))
+      }
+    </Menu.SubMenu>
+  )
+}

src/components/index.js

@@ -3,6 +3,8 @@
 import * as React from 'react';
 import Provider from './Provider';
 import Generator from './Generator';
+import Sidebar from './Sidebar';
+import {Layout} from 'antd';
 import hocs from '../hocs';
 import {createEmptyData} from 'canner-helpers';
 import {Parser, Traverser} from 'canner-compiler';
@@ -89,6 +91,17 @@ class CannerCMS extends React.Component<Props, State> {
       schema: {storages}
     } = this.props;
 
+    const sidebar = [{
+      title: "Posts",
+      to: "/posts"
+    }, {
+      title: 'Other',
+      items: [{
+        title: 'Users',
+        to: '/users'
+      }]
+    }]
+
     return (
       <IntlProvider
         locale={intl.locale || 'en'}
@@ -99,25 +112,33 @@ class CannerCMS extends React.Component<Props, State> {
           ...(intl.messages || {})
         }}
       >
-        <Provider
-          ref={provider => this.provider = provider}
-          client={this.client}
-          schema={this.schema}
-          dataDidChange={dataDidChange}
-          afterDeploy={afterDeploy}
-          rootKey={routes[0]}
-        >
-          <Generator
-            storages={storages}
-            componentTree={this.componentTree || {}}
-            hocs={hocs}
+        <Layout>
+          <Sidebar
+            sidebar={sidebar}
             goTo={goTo}
-            baseUrl={baseUrl}
-            routes={routes}
-            params={params}
-            hideButtons={hideButtons}
           />
-        </Provider>
+          <Layout.Content>
+            <Provider
+              ref={provider => this.provider = provider}
+              client={this.client}
+              schema={this.schema}
+              dataDidChange={dataDidChange}
+              afterDeploy={afterDeploy}
+              rootKey={routes[0]}
+            >
+              <Generator
+                storages={storages}
+                componentTree={this.componentTree || {}}
+                hocs={hocs}
+                goTo={goTo}
+                baseUrl={baseUrl}
+                routes={routes}
+                params={params}
+                hideButtons={hideButtons}
+              />
+            </Provider>
+          </Layout.Content>
+        </Layout>
       </IntlProvider>
     );
   }