feat(Masthead): add mobile megamenu (#4443)

### Related Ticket(s)

#3849 

### Description

Adds megamenu to left nav (mobile view)

### Changelog

**Changed**

- add nested left nav menu for megamenu links
- replace `ArrowLeft16` with `ChevronDown20` for back button


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/masthead/left-nav-menu.ts

@@ -10,7 +10,7 @@
 import { html, property, customElement, LitElement } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import settings from 'carbon-components/es/globals/js/settings';
-import ArrowLeft16 from 'carbon-web-components/es/icons/arrow--left/16.js';
+import ChevronLeft20 from 'carbon-web-components/es/icons/chevron--left/20.js';
 import ChevronDown20 from 'carbon-web-components/es/icons/chevron--down/20.js';
 import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js';
 import { forEach } from '../../globals/internal/collection-helpers';
@@ -104,7 +104,7 @@ class DDSLeftNavMenu extends FocusMixin(LitElement) {
       <ul class="${prefix}--side-nav__menu" role="menu">
         <li class="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back" role="none">
           <a class="bx--side-nav__link" role="menuitem" @click="${handleClickExpando}">
-            <span class="bx--side-nav__link-text">${ArrowLeft16()}${backButtonText}</span>
+            <span class="bx--side-nav__link-text">${ChevronLeft20()}${backButtonText}</span>
           </a>
         </li>
         <li class="bx--masthead__side-nav--submemu-title">${title}</li>

packages/web-components/src/components/masthead/masthead-composite.ts

@@ -135,6 +135,46 @@ class DDSMastheadComposite extends LitElement {
     `;
   }
 
+  /**
+   *  Render MegaMenu mobile content
+   *
+   * @param sections menu section data object
+   */
+  // eslint-disable-next-line class-methods-use-this
+  private _renderMobileMegaMenu(sections) {
+    const menu: MastheadMenuItem[] = [];
+
+    sections[0]?.menuItems?.forEach((item: MastheadMenuItem) => {
+      return menu.push(item);
+    });
+
+    return html`
+      ${menu.map((item, i) => {
+        return item.megapanelContent?.quickLinks?.links
+          ? html`
+              <dds-left-nav-menu title="${item.title}" data-autoid="${ddsPrefix}--masthead__l0-sidenav--nav-${i}">
+                ${item.megapanelContent?.quickLinks?.links.map(({ title, url }, j) => {
+                  return html`
+                    <dds-left-nav-menu-item
+                      href="${url}"
+                      title="${title}"
+                      data-autoid="${ddsPrefix}--masthead__l0-sidenav--subnav-col${j}-item${j}"
+                    ></dds-left-nav-menu-item>
+                  `;
+                })}
+              </dds-left-nav-menu>
+            `
+          : html`
+              <dds-left-nav-menu-item
+                href="${item.url}"
+                title="${item.title}"
+                data-autoid="${ddsPrefix}--masthead__l0-sidenav--subnav-col${i}-item${i}"
+              ></dds-left-nav-menu-item>
+            `;
+      })}
+    `;
+  }
+
   /**
    * @param options The options.
    * @param options.target The target of rendering navigation items.
@@ -147,8 +187,10 @@ class DDSMastheadComposite extends LitElement {
       : navLinks.map((link, i) => {
           const { menuSections = [], title, url } = link;
           let sections;
+          let mobileSections;
           if (link.hasMegapanel) {
             sections = this._renderMegaMenu(menuSections);
+            mobileSections = this._renderMobileMegaMenu(menuSections);
           } else {
             sections = menuSections
               // eslint-disable-next-line no-use-before-define
@@ -212,7 +254,7 @@ class DDSMastheadComposite extends LitElement {
               `
             : html`
                 <dds-left-nav-menu title="${title}" data-autoid="${ddsPrefix}--masthead__l0-sidenav--nav-${i}">
-                  ${sections}
+                  ${mobileSections}
                 </dds-left-nav-menu>
               `;
         });

packages/web-components/tests/snapshots/dds-masthead-composite.md

@@ -90,12 +90,6 @@
     data-autoid="dds--masthead__l0-sidenav--nav-1"
     title="menu-title-foo"
   >
-    <dds-left-nav-menu-item
-      data-autoid="dds--masthead__l0-sidenav--subnav-col1-item0"
-      href="https://ibmdotcom-webcomponents.mybluemix.net/bar"
-      title="menu-item-title-bar"
-    >
-    </dds-left-nav-menu-item>
   </dds-left-nav-menu>
 </dds-left-nav>