Add toggle sidebar button to be visible only in mobile screen sizes

ee/app/assets/javascripts/epic/components/epic_header.vue

@@ -24,6 +24,7 @@ export default {
   },
   computed: {
     ...mapState([
+      'sidebarCollapsed',
       'epicDeleteInProgress',
       'epicStatusChangeInProgress',
       'author',
@@ -64,7 +65,7 @@ export default {
     });
   },
   methods: {
-    ...mapActions(['requestEpicStatusChangeSuccess', 'toggleEpicStatus']),
+    ...mapActions(['toggleSidebar', 'requestEpicStatusChangeSuccess', 'toggleEpicStatus']),
   },
 };
 </script>
@@ -103,5 +104,14 @@ export default {
         @click="toggleEpicStatus(isEpicOpen)"
       />
     </div>
+    <button
+      :aria-label="__('Toggle sidebar')"
+      class="btn btn-default float-right d-block d-sm-none
+gutter-toggle issuable-gutter-toggle js-sidebar-toggle"
+      type="button"
+      @click="toggleSidebar({ sidebarCollapsed })"
+    >
+      <i class="fa fa-angle-double-left"></i>
+    </button>
   </div>
 </template>

ee/spec/javascripts/epic/components/epic_header_spec.js

@@ -124,5 +124,15 @@ describe('EpicHeaderComponent', () => {
         'Close epic',
       );
     });
+
+    it('renders toggle sidebar button element', () => {
+      const toggleButtonEl = vm.$el.querySelector('button.js-sidebar-toggle');
+
+      expect(toggleButtonEl).not.toBeNull();
+      expect(toggleButtonEl.getAttribute('aria-label')).toBe('Toggle sidebar');
+      expect(toggleButtonEl.classList.contains('d-block')).toBe(true);
+      expect(toggleButtonEl.classList.contains('d-sm-none')).toBe(true);
+      expect(toggleButtonEl.classList.contains('gutter-toggle')).toBe(true);
+    });
   });
 });