shotaK's Add context to the menu collapsible factory target elements

[Ubersmake]

Rebased version of #1299 by shotaK.

What?

I've just duplicated a menu in global.js and in templates and supplied a proper context:

global.js

menu('[data-menu]');
menu('[data-menumobile]');

It seemed to work fine, except when I was clicking the first menu items, the second menu items were opening. After some investigation, I've found out that the context was not specified for the targeted menu items. I've added the context to them and it worked fine.

Testing

This has no effect on Cornerstone as it is, but benefits anyone extending Cornerstone.

To test, make the following changes:

Change /assets/js/theme/global.js so that menu() is defined twice with two different contexts:

@@ -31,7 +31,8 @@ export default class Global extends PageManager {
         cartPreview();
         compareProducts(this.context.urls);
         carousel();
-        menu();
+        menu('[data-menu]');
+        menu('[data-menu-duplicate]');
         mobileMenuToggle();
         privacyCookieNotification();
         maintenanceMode(this.context.maintenanceMode);

Add something to /templates/components/common/header.html so that the second menu can be displayed:

@@ -28,4 +28,12 @@
     <div class="navPages-container" id="menu" data-menu>
         {{> components/common/navigation-menu}}
     </div>
+
+    <div style="height:100px">
+        <p>Some Spacing</p>
+    </div>
+
+    <div class="navPages-container" id="menu" data-menu-duplicate>
+        {{> components/common/navigation-menu-2}}
+    </div>
 </header>

Add a new file for that new template being referenced, templates/components/common/navigation-menu-2.html. Note the something-else, an attribute which is being used as a "tell" to verify that things are working as expected.

<nav class="navPages">
    <ul class="navPages-list{{#if theme_settings.navigation_design '!==' 'simple'}} navPages-list-depth-max{{/if}}">
        {{#each categories}}
            <li class="navPages-item" something-else>
                {{> components/common/navigation-list}}
            </li>
        {{/each}}    
    </ul>
</nav>

With fix:

Notice how there are two menu bars, and the "duplicate" is correctly tagged with the something-else attribute.

Without fix:

Only the first menu can be accessed here. something-else does not appear, and only the first menu is opened and interacted with while inspecting the DOM.

And for good measure, Cornerstone 2.6.0 with the fix:

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin