1 files changed, 26 insertions, 14 deletions

diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js
index 62675d7e67e..3e483b69fd2 100644
--- a/app/assets/javascripts/group_name.js
+++ b/app/assets/javascripts/group_name.js
@@ -1,16 +1,19 @@
-
+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.titleWidth = this.title.offsetWidth;
-    this.groupTitle = document.querySelector('.group-title');
-    this.groups = document.querySelectorAll('.group-path');
-    this.toggle = null;
-    this.isHidden = false;
-    this.init();
+    this.titleContainer = document.querySelector('.js-title-container');
+    this.title = this.titleContainer.querySelector('.title');
+
+    if (this.title) {
+      this.titleWidth = this.title.offsetWidth;
+      this.groupTitle = this.titleContainer.querySelector('.group-title');
+      this.groups = this.titleContainer.querySelectorAll('.group-path');
+      this.toggle = null;
+      this.isHidden = false;
+      this.init();
+    }
   }
 
   init() {
@@ -33,29 +36,38 @@ 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();
   }
 
   showToggle() {
     this.title.classList.add('wrap');
     this.toggle.classList.remove('hidden');
-    if (this.isHidden) this.groupTitle.classList.add('is-hidden');
+    if (this.isHidden) this.groupTitle.classList.add('hidden');
   }
 
   hideToggle() {
     this.title.classList.remove('wrap');
     this.toggle.classList.add('hidden');
-    if (this.isHidden) this.groupTitle.classList.remove('is-hidden');
+    if (this.isHidden) this.groupTitle.classList.remove('hidden');
   }
 
   toggleGroups() {
     this.isHidden = !this.isHidden;
-    this.groupTitle.classList.toggle('is-hidden');
+    this.groupTitle.classList.toggle('hidden');
   }
 
   render() {