Extend the view ‘Header.Menu.View’ as shown below in the entry point file.
_.extend(HeaderMenuView.prototype, {
render: function() {
BackboneView.prototype.render.apply(this, arguments);
this.$(‘[data-type=”header-sidebar-menu”]’).attr(‘data-type’, ‘jj-header-sidebar-menu’);
this.$(‘[data-type=”jj-header-sidebar-menu”]’).sidebarMenu();
},
getContext: _.wrap(HeaderMenuView.prototype.getContext, function(fn, …args) {
var context = fn.apply(this, args);
context.enableFeature = enableFeature;
return context;
})
});
Create a custom template and past the same code from header_sidebar.tpl. Edit the following line –
<div class=“header-sidebar-menu-wrapper” data-type=“header-sidebar-menu”> into <div class=“header-sidebar-menu-wrapper” data-type=“jj-header-sidebar-menu”>
In the custom header_link.tpl file specify the template you created in the previous step as shown below.
<div class=“header-secondary-wrapper{{#if isStandalone}} header-secondary-wrapper-standalone{{/if}}“ data-view=“Header.Menu” data-phone-template=“jj_header_sidebar” data-tablet-template=“header_sidebar”></div>