Feature/mega menu

Portals/_default/Skins/CLIENT_CODE/menus/NavMegaMenu/NavMegaMenu.cshtml

@@ -0,0 +1,94 @@
+@using DotNetNuke.Web.DDRMenu;
+@using System.Dynamic;
+@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>
+@{ var root = Model.Source.root; }
+
+@helper RenderMegaMenu(IList<MenuNode> nodes) {
+  if (nodes.Count > 0) {
+    <ul class="navbar-nav ml-auto  mega-menu">
+      @foreach (var node in nodes) {
+        var HasChildren = node.HasChildren();
+
+        var navItemClasses = new List<string>();
+        navItemClasses.Add("nav-item");
+        if (HasChildren) { navItemClasses.Add("mega-menu__item"); }
+        navItemClasses.Add("tab-" + node.TabId);
+        if (node.Breadcrumb) { navItemClasses.Add("active"); }
+
+        var navItemCss = new HtmlString((navItemClasses.Count == 0) ? "" : ("class=\"" + String.Join(" ", navItemClasses.ToArray()) + "\""));
+        <li @navItemCss>
+          <a
+            href='@(node.Enabled ? node.Url : "#")'
+            class='nav-link'
+            @{
+              if (HasChildren) {
+                <text>id="[email protected]"</text>
+                <text>data-toggle="dropdown"</text>
+                <text>aria-haspopup="true"</text>
+                <text>aria-expanded="false"</text>
+              }
+            }
+          >@node.Text</a>
+          @RenderSubmenu(node)
+        </li>
+      }
+    </ul>
+  }
+}
+
+@helper RenderSubmenu(MenuNode node) {
+  var children = node.Children;
+  if (children.Count > 0) {
+    <ul class="mega-menu__dropdown" aria-labelledby="[email protected]">
+      @foreach (var child in children) {
+        var HasChildren = child.HasChildren();
+        var HasIcon = !String.IsNullOrEmpty(child.Icon);
+
+        var itemClasses = new List<string>();
+        itemClasses.Add("tab-" + child.TabId);
+        itemClasses.Add("mega-menu__submenu");
+
+        var itemCss = new HtmlString((itemClasses.Count == 0) ? "" : (" class=\"" + String.Join(" ", itemClasses.ToArray()) + "\""));
+
+        var linkClasses = new List<string>();
+        linkClasses.Add("mega-menu__link");
+        linkClasses.Add("mega-menu__submenu__header");
+        if (child.Breadcrumb) { linkClasses.Add("active"); }
+
+        var linkCss = new HtmlString((linkClasses.Count == 0) ? "" : (" class=\"" + String.Join(" ", linkClasses.ToArray()) + "\""));
+        <li @itemCss>
+          <a @linkCss href='@(child.Enabled ? child.Url : "#")' target="@(child.Target)">
+            <img src='@(HasIcon ? child.Icon : "https://placehold.it/60x60")' alt="@(child.Text)" class="mega-menu__submenu__icon" />
+            <span>@child.Text</span>
+          </a>
+          @RenderSubmenuList(child)
+        </li>
+      }
+    </ul>
+  }
+}
+
+@helper RenderSubmenuList(MenuNode node) {
+  var grandchildren = node.Children;
+  if (grandchildren.Count > 0) {
+    <ul class="mega-menu__submenu__list">
+      @foreach (var grandchild in grandchildren) {
+        var linkClasses = new List<string>();
+        linkClasses.Add("mega-menu__link");
+        if (grandchild.Breadcrumb) { linkClasses.Add("active"); }
+
+        var linkCss = new HtmlString((linkClasses.Count == 0) ? "" : (" class=\"" + String.Join(" ", linkClasses.ToArray()) + "\""));
+        <li>
+          <a @linkCss href='@(grandchild.Enabled ? grandchild.Url : "#")' target="@(grandchild.Target)">@grandchild.Text</a>
+        </li>
+      }
+    </ul>
+  } else {
+    var HasDescription = !String.IsNullOrEmpty(node.Description);
+
+    <p class="mega-menu__submenu__description">@(HasDescription ? node.Description : "This is the tab description...")</p>
+
+  }
+}
+
+@RenderMegaMenu(root.Children)

Portals/_default/Skins/CLIENT_CODE/menus/NavMegaMenu/menudef.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <template>NavMegaMenu.cshtml</template>
+</manifest>

Portals/_default/Skins/CLIENT_CODE/package.json

@@ -33,8 +33,8 @@
     "del": "^4.1.1",
     "dotenv": "^8.0.0",
     "eslint": "^5.16.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-config-prettier": "^5.0.0",
-    "eslint-plugin-prettier": "^3.0.1",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0-beta.2",

Portals/_default/Skins/CLIENT_CODE/src/js/modules/enabled-mega-menu.js

@@ -0,0 +1,55 @@
+//
+// Enable mega menu dropdowns
+// ==========================
+//
+// ...
+// ------------------------------------------------------------------------
+
+function enableMegaMenu() {
+  const dropdowns = [...document.querySelectorAll('.mega-menu__item')];
+
+  function showDropdownMenu(event) {
+    const navItem = event.target;
+    const navLink = navItem.firstElementChild;
+    const dropdownMenu = navLink.nextElementSibling;
+
+    navItem.classList.add('show');
+    dropdownMenu.classList.add('show');
+    navLink.setAttribute('aria-expanded', true);
+  }
+
+  function hideDropdownMenu(event) {
+    const navItem = event.target;
+    const navLink = navItem.firstElementChild;
+    const dropdownMenu = navLink.nextElementSibling;
+
+    navItem.classList.remove('show');
+    dropdownMenu.classList.remove('show');
+    navLink.setAttribute('aria-expanded', false);
+  }
+
+  function navigateToUrl(event) {
+    const link = event.target.href;
+    if (link && link !== '#') {
+      window.location.assign(link);
+    }
+  }
+
+  dropdowns.forEach(d => {
+    d.addEventListener('mouseenter', showDropdownMenu);
+    d.addEventListener('mouseleave', hideDropdownMenu);
+
+    d.addEventListener(
+      'click',
+      event => {
+        // Don't execute the function if the user is opening the link
+        // in a new tab by pressing Control or Command while clicking.
+        if (event.metaKey || event.ctrlKey) return;
+        navigateToUrl(event);
+      },
+      false
+    );
+  });
+}
+
+export default enableMegaMenu;

Portals/_default/Skins/CLIENT_CODE/src/scss/Skin.scss

@@ -92,6 +92,7 @@
 
 // ... then add custom components ...
 @import "_components/child-page";
+@import "_components/mega-menu";
 @import "_components/panes";
 
 // ... and then add third-party vendor overrides

Portals/_default/Skins/CLIENT_CODE/src/scss/_base/_base.scss

@@ -100,6 +100,10 @@ a {
 // Block
 // =====
 
+img {
+  max-width: 100%;
+}
+
 blockquote,
 p,
 ol,