Init Layout of SSW.Rules

gatsby-config.js

@@ -1,10 +1,25 @@
-/**
- * Configure your Gatsby site with this file.
- *
- * See: https://www.gatsbyjs.org/docs/gatsby-config/
- */
+const siteConfig = require('./site-config');
+
+require('dotenv').config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
 
 module.exports = {
-  /* Your site config here */
-  plugins: [],
+  pathPrefix: '/rules',
+  siteMetadata: {
+    ...siteConfig,
+  },
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-sitemap',
+    'gatsby-transformer-json',
+    'gatsby-plugin-postcss',
+    {
+    resolve: 'gatsby-plugin-breadcrumb',
+    options: {
+      useAutoGen: true,
+      autoGenHomeLabel: 'Rules',
+      useClassNames: true,
+    },
+  }],
 }

lib/ssw.megamenu/desktop-menu/desktop-menu.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './desktop-menu.module.css';
+import cs from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import Dropdown from '../dropdown/dropdown';
+
+var menuModel = require('../data/menu.json');
+
+var DesktopMenu = function DesktopMenu() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cs(styles.menuDrop, styles.hiddenXs, styles.hiddenSm)
+  }, /*#__PURE__*/React.createElement("ul", null, menuModel.menuItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, !item.children && /*#__PURE__*/React.createElement("a", {
+      href: item.navigateUrl ? item.navigateUrl : null,
+      className: cs(styles.ignore, 'unstyled')
+    }, item.text), ' ', item.children && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+      className: cs(styles.ignore, 'unstyled')
+    }, item.text, " ", /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faAngleDown
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles.Menu
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.MenuImg
+    }, /*#__PURE__*/React.createElement("img", {
+      src: require("../images/" + item.groupImageUrl),
+      loading: "lazy"
+    })), /*#__PURE__*/React.createElement(Dropdown, {
+      items: item.children
+    }))));
+  })));
+};
+
+export default DesktopMenu;

lib/ssw.megamenu/desktop-menu/desktop-menu.module.css

@@ -0,0 +1,66 @@
+.menuDrop a {
+  text-decoration: none;
+}
+.menuDrop {
+  width: 100%;
+  float: left;
+  position: relative;
+}
+.menuDrop > ul {
+  padding: 0;
+  margin: 0;
+}
+
+.menuDrop > ul > li {
+  padding: 0;
+  display: inline-block;
+  line-height: 36px;
+  background: none;
+}
+.menuDrop > ul > li:hover {
+  background: #eee;
+  color: #333 !important;
+}
+.menuDrop > ul > li:hover > a {
+  color: #333 !important;
+  border-bottom: 0;
+}
+.menuDrop > ul > li > a {
+  color: #eee;
+  border-bottom: 0;
+  text-decoration: none;
+  border-bottom: 0;
+  text-transform: uppercase;
+  padding: 0 15px;
+  font-size: 0.9rem;
+}
+.menuDrop > ul > li:hover > div.Menu {
+  display: block;
+}
+.Menu {
+  display: none;
+  position: absolute;
+  top: 36px;
+  left: 0;
+  z-index: 2000;
+  background-color: #f0f0f0;
+  width: 100%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+@media (max-width: 767px) {
+  .hiddenXs {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .hiddenSm {
+    display: none !important;
+  }
+}
+.ignore:after {
+  content: none !important;
+  padding-left: 0;
+}
+.MenuImg img {
+  width: 100%;
+}

lib/ssw.megamenu/dropdown-item/dropdown-item.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './dropdown-item.module.css';
+import cs from 'classnames';
+
+var DropdownItem = function DropdownItem(_ref) {
+  var item = _ref.item,
+      index = _ref.index;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, item.level === 1 && /*#__PURE__*/React.createElement("li", {
+    key: index,
+    className: item.data.navigateUrlOnMobileOnly ? cs(styles.NonClickableMenuItem, styles.level1) : styles.level1
+  }, /*#__PURE__*/React.createElement("a", {
+    href: !item.data.navigateUrlOnMobileOnly ? item.data.navigateUrl : null,
+    className: cs(styles.ignore, 'unstyled')
+  }, item.data.text)), item.level === 2 && /*#__PURE__*/React.createElement("li", {
+    key: index,
+    className: item.data.cssClass ? cs(styles[item.data.cssClass], styles.ClickableMenuItem, styles.level2) : cs(styles.ClickableMenuItem, styles.level2)
+  }, /*#__PURE__*/React.createElement("a", {
+    href: item.data.navigateUrl ? item.data.navigateUrl : null,
+    className: cs(styles.ignore, 'unstyled')
+  }, item.data.text)));
+};
+
+export default DropdownItem;

lib/ssw.megamenu/dropdown-item/dropdown-item.module.css

@@ -0,0 +1,71 @@
+.Popular {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAOCAIAAADmEAgNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQTJCMDg3OTFDMjMxMUU1QkYxNkQzRUE1Q0I0QzhENCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQTJCMDg3QTFDMjMxMUU1QkYxNkQzRUE1Q0I0QzhENCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNBMkIwODc3MUMyMzExRTVCRjE2RDNFQTVDQjRDOEQ0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNBMkIwODc4MUMyMzExRTVCRjE2RDNFQTVDQjRDOEQ0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2JRVPgAAAb9JREFUeNpiPOdgyzCYABPDIAOjDiIEWOAs9UVLuWRlgYy/3749mTvn3bo1InEJUuERzFxcv96+fb5sKVBEKChEPjcPov7LjRu3M9P0tu54e+jg0852FmER3TXrnq9Z/WbFcgjjxdTJcMO116xnExa+29Lyae8urHZhD6GP586dd7T7+fataEAg0G7ZxCSgaqDI2/37gO7gNjGDKLtVWvJw8iQeDQ2gGmI8zefsBnQN0G4BeztMu4Rd3QhH2b+vX3kMDIABA3E70K9A43jNzdGU/fn4iRgHAd0BDM5X27YKGJtgyv58/Qqng/iNjAz3HwIyHvX1snDz4LJArbsHGGDASIGEP2EHGZt8vnL5242bwNgHJgN0u+pqcDoIEow346J/3r754egRYDhDIkUiOxdo1ueTJ+FRBlQGSSLfHz3i0dYBxYu9A5AE2ormGqALgHolQ0KVa0AWC1pawe0CxjswJcGdiJ6o0QAwstgkJYEhAUTAuANq/nrmFLucHJoyYFgq1NZB/AoJM2DqBrKBLgCib48fA2MfSAI9CRSULq8U8/BkV1WHWwFMGMB88/3aNaDhEEHG0ZJ61EEUAoAAAwCvXdrp+ivLHwAAAABJRU5ErkJggg==')
+    no-repeat scroll right 4px transparent !important;
+}
+.ignore:after {
+  content: none !important;
+  padding-left: 0;
+}
+.NonClickableMenuItem a:hover {
+  cursor: default !important;
+  color: #333 !important;
+  border-bottom: 1px solid #ccc !important;
+}
+.ClickableMenuItem a:hover {
+  border-bottom: 1px solid #cc4141 !important;
+  color: #cc4141 !important;
+}
+.ClickableMenuItem a,
+.NonClickableMenuItem a {
+  padding-left: 0;
+  padding-right: 0;
+  color: #333;
+}
+
+.level1 {
+  padding-bottom: 0;
+  padding-right: 2px;
+  padding-top: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+  background: none;
+}
+.level1 a {
+  background: none repeat scroll 0 0 transparent;
+  border-bottom: 1px solid #ccc;
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 3px;
+  padding-top: 3px;
+  margin-bottom: 5px;
+  text-transform: none;
+  display: block;
+  line-height: normal;
+  color: #333;
+}
+.level1 a:hover {
+  border-bottom: 1px solid #cc4141;
+  color: #cc4141;
+}
+.level2 {
+  line-height: normal;
+  padding: 0 0 0 10px;
+  background: none;
+}
+.level2 a {
+  background: none repeat scroll 0 0 transparent;
+  border-bottom: 1px solid transparent;
+  font-size: 0.9rem;
+  font-weight: normal;
+  padding: 4px 0 3px;
+  margin: 0;
+  line-height: 1.4;
+  text-transform: none;
+  display: inline-block;
+}
+.map:after {
+  font-family: FontAwesome;
+  content: '\f041';
+  padding: 0 3px 0;
+}

lib/ssw.megamenu/dropdown/dropdown.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import DropdownItem from '../dropdown-item/dropdown-item';
+import styles from './dropdown.module.css';
+
+var Dropdown = function Dropdown(_ref) {
+  var items = _ref.items;
+
+  var CountChildren = function CountChildren(items) {
+    var count = items.length;
+    items.forEach(function (level1) {
+      if (level1.children) {
+        count += level1.children.length;
+      }
+    });
+    return count;
+  };
+
+  var createDropDown = function createDropDown(items) {
+    var blocks = [];
+    blocks.push([]);
+    var countChildren = CountChildren(items);
+    var currentIndex = 0;
+    var currentColumn = 0;
+    items.forEach(function (level1Item) {
+      if (level1Item.breakListBefore) {
+        currentColumn++;
+        currentIndex = 0;
+        blocks.push([]);
+      }
+
+      blocks[currentColumn].push({
+        level: 1,
+        data: level1Item
+      });
+
+      if (level1Item.children) {
+        level1Item.children.forEach(function (level2Item) {
+          if (level2Item.breakListBefore) {
+            currentIndex++;
+
+            if (level2Item.breakListBefore || currentIndex > countChildren / currentColumn) {
+              currentColumn++;
+              currentIndex = 0;
+              blocks.push([]);
+            }
+          }
+
+          blocks[currentColumn].push({
+            level: 2,
+            data: level2Item
+          });
+        });
+      }
+    });
+    return blocks.map(function (column, index) {
+      return /*#__PURE__*/React.createElement("ul", {
+        key: index,
+        className: styles.colMd3
+      }, column.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(DropdownItem, {
+          key: index,
+          item: item
+        });
+      }));
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.MenuWrapper
+  }, createDropDown(items));
+};
+
+export default Dropdown;

lib/ssw.megamenu/dropdown/dropdown.module.css

@@ -0,0 +1,59 @@
+.colMd3 {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+  float: left;
+}
+.colMd3 {
+  width: 25%;
+}
+.MenuWrapper {
+  padding: 10px 10px 20px;
+  width: 100%;
+  margin: 0;
+  display: table;
+  box-sizing: border-box;
+}
+.MenuWrapper > ul {
+  padding: 0 10px;
+  list-style: none;
+  box-sizing: border-box;
+}
+.MenuWrapper > ul li.level1 {
+  padding-bottom: 0;
+  padding-right: 2px;
+  padding-top: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+  background: none;
+}
+.MenuWrapper > ul li.level1 a {
+  background: none repeat scroll 0 0 transparent;
+  border-bottom: 1px solid #ccc;
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 3px;
+  padding-top: 3px;
+  margin-bottom: 5px;
+  text-transform: none;
+  display: block;
+  line-height: normal;
+}
+.MenuWrapper > ul li.level2 {
+  line-height: normal;
+  padding: 0 0 0 10px;
+  background: none;
+}
+.MenuWrapper > ul li.level2 a {
+  background: none repeat scroll 0 0 transparent;
+  border-bottom: 1px solid transparent;
+  font-size: 0.9rem;
+  font-weight: normal;
+  padding: 4px 0 3px;
+  margin: 0;
+  line-height: 1.4;
+  text-transform: none;
+  display: inline-block;
+}