Merge pull request #1543 from GitbookIO/dream

React for rendering website with plugins

1 files changed, 43 insertions, 0 deletions

diff --git a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
new file mode 100644
index 0000000..d426a40
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
@@ -0,0 +1,43 @@
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+const sidebar = require('../actions/sidebar');
+
+const Toolbar = React.createClass({
+    propTypes: {
+        title:    React.PropTypes.string.isRequired,
+        dispatch: React.PropTypes.func,
+        readme:   GitBook.PropTypes.Readme
+    },
+
+    onToggle() {
+        const { dispatch } = this.props;
+        dispatch(sidebar.toggle());
+    },
+
+    render() {
+        const { title, readme } = this.props;
+
+        return (
+            <GitBook.FlexLayout className="Toolbar">
+                <GitBook.FlexBox className="Toolbar-left">
+                    <GitBook.InjectedComponentSet align="flex-end" matching={{ role: 'toolbar:buttons:left' }}>
+                        <GitBook.Button onClick={this.onToggle}>
+                            <GitBook.Icon id="align-justify" />
+                        </GitBook.Button>
+                    </GitBook.InjectedComponentSet>
+                </GitBook.FlexBox>
+                <GitBook.FlexBox auto>
+                    <h1 className="Toolbar-Title">
+                        <GitBook.Link to={readme.file}>{title}</GitBook.Link>
+                    </h1>
+                </GitBook.FlexBox>
+                <GitBook.FlexBox className="Toolbar-right">
+                    <GitBook.InjectedComponentSet align="flex-end" matching={{ role: 'toolbar:buttons:right' }} />
+                </GitBook.FlexBox>
+            </GitBook.FlexLayout>
+        );
+    }
+});
+
+module.exports = GitBook.connect(Toolbar);