summaryrefslogtreecommitdiffstats
path: root/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
blob: 298017d638da242b258b92bacc344a3fc53db87d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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.Button onClick={this.onToggle}>
                        <GitBook.Icon id="align-justify" />
                    </GitBook.Button>
                    <GitBook.InjectedComponentSet align="flex-start" matching={{ role: 'toolbar:buttons:left' }} />
                </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);