diff options
| author | Johan Preynat <johan.preynat@gmail.com> | 2016-10-31 17:13:19 +0100 |
|---|---|---|
| committer | Johan Preynat <johan.preynat@gmail.com> | 2016-10-31 17:13:19 +0100 |
| commit | 1780435c4fee7e3a6c5aa79e788214a5b6ca8493 (patch) | |
| tree | c9e4239b4ae75d911025d002122faaea51abb247 /packages/gitbook-plugin-theme-default/src/components/Theme.js | |
| parent | ebf7a5cf506f10b52eaeef94484954b5e6b436ae (diff) | |
| download | gitbook-1780435c4fee7e3a6c5aa79e788214a5b6ca8493.zip gitbook-1780435c4fee7e3a6c5aa79e788214a5b6ca8493.tar.gz gitbook-1780435c4fee7e3a6c5aa79e788214a5b6ca8493.tar.bz2 | |
Use fixed size for sidebar and provide animation
Diffstat (limited to 'packages/gitbook-plugin-theme-default/src/components/Theme.js')
| -rw-r--r-- | packages/gitbook-plugin-theme-default/src/components/Theme.js | 22 |
1 files changed, 12 insertions, 10 deletions
diff --git a/packages/gitbook-plugin-theme-default/src/components/Theme.js b/packages/gitbook-plugin-theme-default/src/components/Theme.js index 8f5dce6..b8cf89e 100644 --- a/packages/gitbook-plugin-theme-default/src/components/Theme.js +++ b/packages/gitbook-plugin-theme-default/src/components/Theme.js @@ -1,5 +1,5 @@ const GitBook = require('gitbook-core'); -const { React } = GitBook; +const { React, ReactCSSTransitionGroup } = GitBook; const Sidebar = require('./Sidebar'); const Body = require('./Body'); @@ -29,16 +29,18 @@ const Theme = React.createClass({ <GitBook.ImportCSS href="gitbook/theme-default/theme.css" /> <GitBook.FlexBox> - <GitBook.FlexLayout> - {sidebar.open ? ( - <GitBook.FlexBox col={3}> - <Sidebar summary={summary} /> - </GitBook.FlexBox> - ) : null} - <GitBook.FlexBox col={sidebar.open ? 9 : 12}> + <ReactCSSTransitionGroup + component={GitBook.FlexLayout} + transitionName="Layout" + transitionEnterTimeout={300} + transitionLeaveTimeout={300}> + {sidebar.open ? ( + <Sidebar key={0} summary={summary} /> + ) : null} + <div key={1} className="Body-Flex"> <Body page={page} readme={readme} /> - </GitBook.FlexBox> - </GitBook.FlexLayout> + </div> + </ReactCSSTransitionGroup> </GitBook.FlexBox> {children} </GitBook.FlexLayout> |