Add js to expand and contract side menu

app/assets/javascripts/application.js.coffee

@@ -212,4 +212,25 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
 
+  $('.right-sidebar').on 'click', '.gutter-toggle', (e) ->
+    e.preventDefault()
+    $this = $(this)
+    $thisIcon = $this.find 'i'
+    if $thisIcon.hasClass('fa-angle-double-right')
+      $thisIcon.removeClass('fa-angle-double-right')
+        .addClass('fa-angle-double-left')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
+    else
+      $thisIcon.removeClass('fa-angle-double-left')
+        .addClass('fa-angle-double-right')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+
+    console.log('collapse')
+
   new Aside()

app/assets/stylesheets/pages/issuable.scss

@@ -42,8 +42,6 @@
 
 .issuable-details {
   section {
-    border-right: 1px solid $border-white-light;
-
     .issuable-discussion {
       margin-right: 1px;
     }
@@ -92,7 +90,7 @@
 
     }
 
-    .gutter-collapse {
+    .gutter-toggle {
       margin-left: 10px;
       border-left: 1px solid #F0F0F0;
       padding-left: 10px;
@@ -162,9 +160,16 @@
   transition-duration: .3s;
   background: $gray-light;
   overflow: scroll;
-  width: $gutter_width;
   padding: 10px 20px;
 
+  &.right-sidebar-expanded {
+    width: $gutter_width;
+  }
+
+  &.right-sidebar-collapsed {
+    width: $sidebar_collapsed_width;
+  }
+
   .btn {
     background: $gray-normal;
     border: 1px solid $gray-darkest;

app/helpers/application_helper.rb

@@ -303,7 +303,7 @@ module ApplicationHelper
     end
   end
 
-  def next_issuable_for(project)
+  def next_issuable_for(project, id)
     if project.nil?
       nil
     elsif current_controller?(:issues)
@@ -313,13 +313,13 @@ module ApplicationHelper
     end
   end
 
-  def prev_issuable_for(project)
+  def prev_issuable_for(project, id)
     if project.nil?
       nil
     elsif current_controller?(:issues)
       project.issues.where("id < ?", id).last
     elsif current_controller?(:merge_requests)
-      project.merge_requests.where("id > ?", id).last
+      project.merge_requests.where("id < ?", id).last
     end
   end
 

app/views/shared/issuable/_sidebar.html.haml

-%aside.right-sidebar
+%aside.right-sidebar.right-sidebar-expanded
   .issuable-sidebar
     .block
       %span.issuable-count.pull-left
         = issuable.iid
         of
         = issuable_count(:all, @project)
-      %span.gutter-collapse.pull-right
-        = icon('angle-double-right')
+      %span.pull-right
+        %a.gutter-toggle{href: '#'}
+          = icon('angle-double-right')
       .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
-        %a.btn.btn-default{href: '#'}
-          Prev
-        %a.btn.btn-default{href: '#'}
-          Next
+        = link_to 'Prev', namespace_project_issue_path(namespace_id: @project, id: prev_issuable_for(@project, issuable.id)), class: 'btn btn-default'
+        = link_to 'Next', namespace_project_issue_path(namespace_id: @project, id: next_issuable_for(@project, issuable.id)), class: 'btn btn-default'
 
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
       .block.assignee