Polish sidebar toggle

2 files changed, 20 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.js b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
index a9ad3708514..5a6e47e566e 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
@@ -14,6 +14,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    showToggle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     assigneeTitle() {
@@ -36,6 +41,19 @@ export default {
       >
         Edit
       </a>
+      <a
+        v-if="showToggle"
+        aria-label="Toggle sidebar"
+        class="gutter-toggle pull-right js-sidebar-toggle"
+        href="#"
+        role="button"
+      >
+        <i
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-angle-double-right"
+        />
+      </a>
     </div>
   `,
 };
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
index da4abf0b68f..f83c3b037ed 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
@@ -64,6 +64,7 @@ export default {
   },
   beforeMount() {
     this.field = this.$el.dataset.field;
+    this.signedIn = typeof this.$el.dataset.signedIn !== 'undefined';
   },
   template: `
     <div>
@@ -71,6 +72,7 @@ export default {
         :number-of-assignees="store.assignees.length"
         :loading="loading || store.isFetching.assignees"
         :editable="store.editable"
+        :show-toggle="!signedIn"
       />
       <assignees
         v-if="!store.isFetching.assignees"