add basic sidebar functionality to milestones page

app/assets/javascripts/dispatcher.js

@@ -33,6 +33,8 @@
 /* global ProjectShow */
 /* global Labels */
 /* global Shortcuts */
+/* global Sidebar */
+
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
@@ -118,6 +120,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'groups:milestones:show':
         case 'dashboard:milestones:show':
           new Milestone();
+          new Sidebar();
           break;
         case 'dashboard:todos:index':
           new gl.Todos();

app/helpers/nav_helper.rb

@@ -6,7 +6,8 @@ module NavHelper
         current_path?('merge_requests#builds') ||
         current_path?('merge_requests#conflicts') ||
         current_path?('merge_requests#pipelines') ||
-        current_path?('issues#show')
+        current_path?('issues#show') ||
+        current_path?('milestones#show')
       if cookies[:collapsed_gutter] == 'true'
         "page-gutter right-sidebar-collapsed"
       else

app/views/dashboard/milestones/show.html.haml

@@ -3,3 +3,4 @@
 = render 'shared/milestones/top', milestone: @milestone
 = render 'shared/milestones/summary', milestone: @milestone
 = render 'shared/milestones/tabs', milestone: @milestone, show_full_project_name: true
+= render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 51

app/views/groups/milestones/show.html.haml

@@ -6,3 +6,4 @@
 = render 'shared/milestones/top', milestone: @milestone, group: @group
 = render 'shared/milestones/summary', milestone: @milestone
 = render 'shared/milestones/tabs', milestone: @milestone, show_project_name: true
+= render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 102

app/views/projects/milestones/show.html.haml

@@ -36,6 +36,9 @@
         = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do
           Delete
 
+      %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+        = icon('angle-double-left')
+
   .detail-page-description.milestone-detail{ class: ('hide-bottom-border' unless @milestone.description.present? ) }
     %h2.title
       = markdown_field(@milestone, :title)
@@ -55,3 +58,4 @@
 
   = render 'shared/milestones/summary', milestone: @milestone, project: @project
   = render 'shared/milestones/tabs', milestone: @milestone
+  = render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 153

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

+- affix_offset = local_assigns.fetch(:affix_offset, "102")
+
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+  .issuable-sidebar
+    .block.issuable-sidebar-header
+      %span.issuable-header-text.hide-collapsed.pull-left
+        Milestone #{milestone.try(:to_reference) || milestone.title}
+      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
+        = sidebar_gutter_toggle_icon

app/views/shared/milestones/_top.html.haml

@@ -3,6 +3,9 @@
 - group = local_assigns[:group]
 
 .detail-page-header
+  %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+    = icon('angle-double-left')
+
   .status-box{ class: "status-box-#{milestone.closed? ? 'closed' : 'open'}" }
     - if milestone.closed?
       Closed