1 files changed, 21 insertions, 0 deletions
diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index 4d03a523486..f58781fa9ec 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -1,7 +1,9 @@
 import Vue from 'vue';
+import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
 import { highCountTrim } from '~/lib/utils/text_utility';
 import Tracking from '~/tracking';
 import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 /**
  * Updates todo counter when todos are toggled.
@@ -99,6 +101,7 @@ function trackShowUserDropdownLink(trackEvent, elToTrack, el) {
     });
   });
 }
+
 export function initNavUserDropdownTracking() {
   const el = document.querySelector('.js-nav-user-dropdown');
   const buyEl = document.querySelector('.js-buy-pipeline-minutes-link');
@@ -108,5 +111,23 @@ export function initNavUserDropdownTracking() {
   }
 }
 
+function initNewNavToggle() {
+  const el = document.querySelector('.js-new-nav-toggle');
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(NewNavToggle, {
+        props: {
+          enabled: parseBoolean(el.dataset.enabled),
+          endpoint: el.dataset.endpoint,
+        },
+      });
+    },
+  });
+}
+
 requestIdleCallback(initStatusTriggers);
 requestIdleCallback(initNavUserDropdownTracking);
+requestIdleCallback(initNewNavToggle);