1 files changed, 16 insertions, 7 deletions

diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js
index 462d792b8d5..37c6765d942 100644
--- a/app/assets/javascripts/group_name.js
+++ b/app/assets/javascripts/group_name.js
@@ -1,13 +1,13 @@
-
+import Cookies from 'js-cookie';
 import _ from 'underscore';
 
 export default class GroupName {
   constructor() {
-    this.titleContainer = document.querySelector('.title-container');
-    this.title = document.querySelector('.title');
+    this.titleContainer = document.querySelector('.js-title-container');
+    this.title = this.titleContainer.querySelector('.title');
     this.titleWidth = this.title.offsetWidth;
-    this.groupTitle = document.querySelector('.group-title');
-    this.groups = document.querySelectorAll('.group-path');
+    this.groupTitle = this.titleContainer.querySelector('.group-title');
+    this.groups = this.titleContainer.querySelectorAll('.group-path');
     this.toggle = null;
     this.isHidden = false;
     this.init();
@@ -33,11 +33,20 @@ export default class GroupName {
 
   createToggle() {
     this.toggle = document.createElement('button');
+    this.toggle.setAttribute('type', 'button');
     this.toggle.className = 'text-expander group-name-toggle';
     this.toggle.setAttribute('aria-label', 'Toggle full path');
-    this.toggle.innerHTML = '...';
+    if (Cookies.get('new_nav') === 'true') {
+      this.toggle.innerHTML = '<i class="fa fa-ellipsis-h" aria-hidden="true"></i>';
+    } else {
+      this.toggle.innerHTML = '...';
+    }
     this.toggle.addEventListener('click', this.toggleGroups.bind(this));
-    this.titleContainer.insertBefore(this.toggle, this.title);
+    if (Cookies.get('new_nav') === 'true') {
+      this.title.insertBefore(this.toggle, this.groupTitle);
+    } else {
+      this.titleContainer.insertBefore(this.toggle, this.title);
+    }
     this.toggleGroups();
   }