Add flex box components

10 files changed, 102 insertions, 13 deletions

diff --git a/packages/gitbook-plugin-theme-default/src/actions/sidebar.js b/packages/gitbook-plugin-theme-default/src/actions/sidebar.js
new file mode 100644
index 0000000..52f8422
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/actions/sidebar.js
@@ -0,0 +1,13 @@
+const ActionTypes = require('./types');
+
+/**
+ * Toggle the sidebar
+ * @return {Action}
+ */
+function toggle() {
+    return { type: ActionTypes.TOGGLE_SIDEBAR };
+}
+
+module.exports = {
+    toggle
+};
diff --git a/packages/gitbook-plugin-theme-default/src/actions/types.js b/packages/gitbook-plugin-theme-default/src/actions/types.js
new file mode 100644
index 0000000..7cffba1
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/actions/types.js
@@ -0,0 +1,4 @@
+
+module.exports = {
+    TOGGLE_SIDEBAR: 'sidebar:toggle'
+};
diff --git a/packages/gitbook-plugin-theme-default/src/components/Body.js b/packages/gitbook-plugin-theme-default/src/components/Body.js
new file mode 100644
index 0000000..de97b5c
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/components/Body.js
@@ -0,0 +1,24 @@
+const React = require('react');
+const GitBook = require('gitbook-core');
+
+const Page = require('./Page');
+const Toolbar = require('./Toolbar');
+
+const Body = React.createClass({
+    propTypes: {
+        page: GitBook.Shapes.Page
+    },
+
+    render() {
+        const { page } = this.props;
+
+        return (
+            <div className="Body page-wrapper">
+                <Toolbar />
+                <Page page={page} />
+            </div>
+        );
+    }
+});
+
+module.exports = Body;
diff --git a/packages/gitbook-plugin-theme-default/src/Page.js b/packages/gitbook-plugin-theme-default/src/components/Page.js
index dda8eba..dda8eba 100644
--- a/packages/gitbook-plugin-theme-default/src/Page.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Page.js
diff --git a/packages/gitbook-plugin-theme-default/src/Sidebar.js b/packages/gitbook-plugin-theme-default/src/components/Sidebar.js
index ff4fcbf..ff4fcbf 100644
--- a/packages/gitbook-plugin-theme-default/src/Sidebar.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Sidebar.js
diff --git a/packages/gitbook-plugin-theme-default/src/Summary.js b/packages/gitbook-plugin-theme-default/src/components/Summary.js
index e95b4b4..e95b4b4 100644
--- a/packages/gitbook-plugin-theme-default/src/Summary.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Summary.js
diff --git a/packages/gitbook-plugin-theme-default/src/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
index b3fd059..de89f97 100644
--- a/packages/gitbook-plugin-theme-default/src/Toolbar.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
@@ -1,10 +1,22 @@
 const React = require('react');
 const GitBook = require('gitbook-core');
 
+const sidebar = require('../actions/sidebar');
+
 const Toolbar = React.createClass({
+    propTypes: {
+        dispatch: React.PropTypes.func
+    },
+
+    onToggle() {
+        const { dispatch } = this.props;
+        dispatch(sidebar.toggle());
+    },
+
     render() {
         return (
             <div className="Toolbar book-toolbar">
+                <button onClick={this.onToggle}>Toggle</button>
                 <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} />
                 <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} />
             </div>
@@ -12,4 +24,4 @@ const Toolbar = React.createClass({
     }
 });
 
-module.exports = Toolbar;
+module.exports = GitBook.connect(Toolbar);
diff --git a/packages/gitbook-plugin-theme-default/src/index.js b/packages/gitbook-plugin-theme-default/src/index.js
index 33ca405..4eed252 100644
--- a/packages/gitbook-plugin-theme-default/src/index.js
+++ b/packages/gitbook-plugin-theme-default/src/index.js
@@ -1,40 +1,54 @@
 const React = require('react');
 const GitBook = require('gitbook-core');
 
-const Sidebar = require('./Sidebar');
-const Page = require('./Page');
-const Toolbar = require('./Toolbar');
+const Sidebar = require('./components/Sidebar');
+const Body = require('./components/Body');
+
+const reduceState = require('./reducers');
 
 let ThemeBody = React.createClass({
     propTypes: {
+        // State
         page:     GitBook.Shapes.Page,
         summary:  GitBook.Shapes.Summary,
+        sidebar:  React.PropTypes.object,
+        // Other props
         children: React.PropTypes.node
     },
 
     render() {
-        const { page, summary, children } = this.props;
+        const { page, summary, children, sidebar } = this.props;
 
         return (
-            <div className="GitBook book">
+            <GitBook.FlexLayout column className="GitBook book">
                 <GitBook.Head
                     title={page.title}
                     titleTemplate="%s - GitBook" />
                 <GitBook.ImportCSS href="gitbook/gitbook-plugin-theme-default/theme.css" />
 
-                <Toolbar />
-                <Sidebar summary={summary} />
-                <Page page={page} />
+                <GitBook.FlexBox>
+                    <GitBook.FlexLayout>
+                        {sidebar.open ? (
+                            <GitBook.FlexBox col={3}>
+                                <Sidebar summary={summary} />
+                            </GitBook.FlexBox>
+                        ) : null}
+                        <GitBook.FlexBox col={9}>
+                            <Body page={page} />
+                        </GitBook.FlexBox>
+                    </GitBook.FlexLayout>
+                </GitBook.FlexBox>
                 {children}
-            </div>
+            </GitBook.FlexLayout>
         );
     }
 });
 
-ThemeBody = GitBook.connect(ThemeBody, ({page, summary}) => {
-    return { page, summary };
+ThemeBody = GitBook.connect(ThemeBody, ({page, summary, sidebar}) => {
+    console.log('connect', sidebar.toJS())
+    return { page, summary, sidebar };
 });
 
 module.exports = GitBook.createPlugin((dispatch, state) => {
     dispatch(GitBook.registerComponent(ThemeBody, { role: 'Body' }));
-});
+}, reduceState);
diff --git a/packages/gitbook-plugin-theme-default/src/reducers/index.js b/packages/gitbook-plugin-theme-default/src/reducers/index.js
new file mode 100644
index 0000000..ac53d3a
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/reducers/index.js
@@ -0,0 +1,5 @@
+const GitBook = require('gitbook-core');
+
+module.exports = GitBook.composeReducer(
+    GitBook.createReducer('sidebar', require('./sidebar'))
+);
diff --git a/packages/gitbook-plugin-theme-default/src/reducers/sidebar.js b/packages/gitbook-plugin-theme-default/src/reducers/sidebar.js
new file mode 100644
index 0000000..7b4eac6
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/reducers/sidebar.js
@@ -0,0 +1,17 @@
+const { Record } = require('immutable');
+const ActionTypes = require('../actions/types');
+
+const SidebarState = Record({
+    open: true
+});
+
+function reduceSidebar(state = SidebarState(), action) {
+    switch (action.type) {
+    case ActionTypes.TOGGLE_SIDEBAR:
+        return state.set('open', !state.get('open'));
+    default:
+        return state;
+    }
+}
+
+module.exports = reduceSidebar;