Use fixed size for sidebar and provide animation

4 files changed, 37 insertions, 1 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;