Use fixed size for sidebar and provide animation

6 files changed, 54 insertions, 14 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Body.less b/packages/gitbook-plugin-theme-default/less/Body.less
index 7524a24..4bc33db 100644
--- a/packages/gitbook-plugin-theme-default/less/Body.less
+++ b/packages/gitbook-plugin-theme-default/less/Body.less
@@ -1,3 +1,7 @@
+.Body-Flex {
+    .flex(1 0 auto);
+}
+
 .Body {
     overflow: auto;
     width: 100%;
diff --git a/packages/gitbook-plugin-theme-default/less/Sidebar.less b/packages/gitbook-plugin-theme-default/less/Sidebar.less
index 82d4165..1689b9f 100644
--- a/packages/gitbook-plugin-theme-default/less/Sidebar.less
+++ b/packages/gitbook-plugin-theme-default/less/Sidebar.less
@@ -1,3 +1,25 @@
+.Sidebar-Flex {
+    .flex(0 0 @sidebar-width);
+
+    &.Layout-enter {
+        margin-left: -@sidebar-width;
+
+        &.Layout-enter-active {
+            margin-left: 0;
+            transition: margin-left 250ms ease-in-out;
+        }
+    }
+
+    &.Layout-leave {
+        margin-left: 0;
+
+        &.Layout-leave-active {
+            margin-left: -@sidebar-width;
+            transition: margin-left 250ms ease-in-out;
+        }
+    }
+}
+
 .Sidebar {
     height: 100%;
     background: @sidebar-background;
diff --git a/packages/gitbook-plugin-theme-default/less/mixins.less b/packages/gitbook-plugin-theme-default/less/mixins.less
index 9867612..e4308b9 100644
--- a/packages/gitbook-plugin-theme-default/less/mixins.less
+++ b/packages/gitbook-plugin-theme-default/less/mixins.less
@@ -1,6 +1,15 @@
-
 .text-adjust(@value) {
     text-size-adjust: @value;
     -ms-text-size-adjust: @value;
     -webkit-text-size-adjust: @value;
 }
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+.flex(@columns: initial) {
+  -webkit-flex: @columns;
+     -moz-flex: @columns;
+      -ms-flex: @columns;
+          flex: @columns;
+}
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index 4a063c9..5c6842d 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -13,6 +13,7 @@
 // Sidebar
 @sidebar-background:                rgb(250, 250, 250);
 @sidebar-border-color:              rgba(0, 0, 0, 0.0666667);
+@sidebar-width:                     300px;
 // Summary
 @summary-header-color:              #939da3;
 @summary-article-padding-v:         10px;
diff --git a/packages/gitbook-plugin-theme-default/src/components/Sidebar.js b/packages/gitbook-plugin-theme-default/src/components/Sidebar.js
index ad1754e..ab628df 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Sidebar.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Sidebar.js
@@ -12,9 +12,11 @@ const Sidebar = React.createClass({
         const { summary } = this.props;
 
         return (
-            <div className="Sidebar book-summary">
-                <GitBook.InjectedComponent matching={{ role: 'search:container:input' }} />
-                <Summary summary={summary} />
+            <div className="Sidebar-Flex">
+                <div className="Sidebar book-summary">
+                    <GitBook.InjectedComponent matching={{ role: 'search:container:input' }} />
+                    <Summary summary={summary} />
+                </div>
             </div>
         );
     }
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>