restore transition for sidebar

Author: Gaurav0

app/styles/_gist-header.scss

@@ -97,6 +97,7 @@
       }
 
       .ember-jstree {
+        height: calc(100% - 50px);
         overflow: auto;
       }
     }

app/styles/_sidebar-layout.scss

@@ -23,6 +23,17 @@
     background-repeat: no-repeat;
     background-size: cover;
 
+    @media (min-width: $screen-md-min) {
+      position: relative;
+      left: 0;
+      transition: left 0.2s ease, margin-right 0.2s ease;
+
+      &.sidebar-closed {
+        left: -25rem;
+        margin-right: -25rem;
+      }
+    }
+
     @media (max-width: $screen-md-min) {
       padding: 0;
       width: 100%;
@@ -31,15 +42,15 @@
     .toggle-mobile {
       display: none;
     }
-  
-    @media (max-width: $screen-md-min) {  
+
+    @media (max-width: $screen-md-min) {
       .toggle-mobile {
         display: block;
         border: none;
         border-radius: 0;
         background-color: transparent;
         color: white;
-  
+
         &:active:hover {
           background-color: transparent;
           color: white;
@@ -71,12 +82,12 @@
         right: 10px;
         top: 13px;
       }
-    
+
       .dropdown-menu {
         .dropdown-submenu > .dropdown-menu {
           top: 5px !important;
           margin-bottom: -31px;
-    
+
           @media (max-width: $screen-md-min) {
             left: 80px;
           }
@@ -117,33 +128,33 @@
         border: 1px solid transparent;
       }
     }
-  
+
     .user-dropdown > .dropdown-toggle {
       padding: 0 1em 0 0;
     }
-  
+
     .dropdown-toggle, .sign-in {
       height: $topbar-control-height;
       line-height: $topbar-control-height - 2;
       text-transform: uppercase;
       font-weight: bold;
       color: $bleached-orange;
       border: 1px solid transparent;
-  
+
       &:hover, &:focus {
         background-color: $menu-hover-bg;
       }
     }
-  
+
     .dropdown-toggle {
       padding: 0 1em;
     }
-  
+
     .sign-in {
       cursor: pointer;
       padding: 0 .5em;
     }
-  
+
     .signing-in {
       padding: 0 1em;
       height: $topbar-control-height;
@@ -161,4 +172,4 @@
     align-items: stretch;
     justify-content: stretch;
   }
-}
+}

app/templates/components/sidebar-layout.hbs

@@ -1,35 +1,33 @@
 <div class="sidebar-layout" ...attributes>
-  {{#if @isSidebarOpen}}
-    <div class="sidebar">
-      <button class="btn toggle-mobile" {{on "click" (fn (mut this.isMobileMenuOpen) (not this.isMobileMenuOpen))}}>
-        {{if this.isMobileMenuOpen "Close" "Open"}} Menu
-      </button>
+  <div class="sidebar {{if @isSidebarOpen 'sidebar-open' 'sidebar-closed'}}">
+    <button class="btn toggle-mobile" {{on "click" (fn (mut this.isMobileMenuOpen) (not this.isMobileMenuOpen))}}>
+      {{if this.isMobileMenuOpen "Close" "Open"}} Menu
+    </button>
 
-      {{#if this.isMobileMenuOpen}}
-        <div class="toggleable-menu">
-          {{#if @sidebarComponent}}
-            {{component @sidebarComponent
-              sidebarApi=(hash
-                showSidebar=(fn this.updateSidebar true)
-                hideSidebar=(fn this.updateSidebar false)
-                isSidebarOpen=@isSidebarOpen
-              )
-            }}
-          {{/if}}
+    {{#if this.isMobileMenuOpen}}
+      <div class="toggleable-menu">
+        {{#if @sidebarComponent}}
+          {{component @sidebarComponent
+            sidebarApi=(hash
+              showSidebar=(fn this.updateSidebar true)
+              hideSidebar=(fn this.updateSidebar false)
+              isSidebarOpen=@isSidebarOpen
+            )
+          }}
+        {{/if}}
 
-          <div class="menus">
-            <hr>
-            <UserMenu
-              @session={{@session}}
-              @signInViaGithub={{route-action "signInViaGithub"}}
-              @signOut={{route-action "signOut"}}
-              @showTwiddles={{transition-to "twiddles"}}
-            />
-          </div>
+        <div class="menus">
+          <hr>
+          <UserMenu
+            @session={{@session}}
+            @signInViaGithub={{route-action "signInViaGithub"}}
+            @signOut={{route-action "signOut"}}
+            @showTwiddles={{transition-to "twiddles"}}
+          />
         </div>
-      {{/if}}
-    </div>
-  {{/if}}
+      </div>
+    {{/if}}
+  </div>
 
   <div class="content">
     {{yield (hash

tests/acceptance/columns-test.js

@@ -59,15 +59,15 @@ module('Acceptance | columns', function(hooks) {
     assert.ok(!urlHas('numColumns'), 'We are on the correct route for 1 columns');
     assert.equal(findAll(columns).length, 1, 'There are now 1 columns');
 
-    assert.equal(findAll('.file-tree').length, 1, "The file tree is shown");
+    assert.equal(findAll('.sidebar-open').length, 1, "The file tree is shown");
     assert.ok(!urlHas('isSidebarOpen'), 'We are on the correct route when file tree is shown');
 
     await click(hideFileTreeGlyph);
     assert.ok(urlHas('isSidebarOpen=false'), 'We are on the correct route when file tree is shown');
-    assert.equal(findAll('.file-tree').length, 0, "The file tree is hidden");
+    assert.equal(findAll('.sidebar-open').length, 0, "The file tree is hidden");
 
     await click(showFileTreeGlyph);
-    assert.equal(findAll('.file-tree').length, 1, "The file tree is shown");
+    assert.equal(findAll('.sidebar-open').length, 1, "The file tree is shown");
     assert.ok(!urlHas('isSidebarOpen'), 'We are on the correct route when file tree is shown');
   });