gatsby-core-theme 1.6.19 → 1.6.20

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [1.6.20](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.19...v1.6.20) (2021-12-07)
+
+
+### Bug Fixes
+
+* close menu onclick a link ([ce4d9bb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ce4d9bbf8733bdbe3b09f7fd84226e6a084b42a7))
+* implement for all core sites ([e5c46c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e5c46c0bee4cf5555990d7c9c5d53bc43a2c6722))
+* small issue ([30fd7e3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/30fd7e305935a00ec514321a5ca8e5a79545681c))
+* small issue ([c1c29ce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c1c29cedca7be589e2b3f23a7d25a399f1cb7ca5))
+
+
+### Code Refactoring
+
+* add custom styles to menu ([f686a60](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f686a6059786b6c4f43cf24041f383a5bd19c0d7))
+
+
+* Merge branch 'tm-navigation-sticky' into 'master' ([0593868](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/05938683ca72db7677d3052f72fadbc26a2db613))
+* Merge branch 'navigation-menu' into 'master' ([d812530](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d8125309b039694c6e35b54d3629134697b407f4))
+
 ## [1.6.19](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.18...v1.6.19) (2021-12-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.19",
+  "version": "1.6.20",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/menu/items/item/index.js

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from '~hooks/link';
 import useIsMobile from '~hooks/useIsMobile';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import { imagePrettyUrl } from '~helpers/getters';
+import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 import styles from './item.module.scss';
 
@@ -21,6 +22,8 @@ export default function Item({
   const [active, setActive] = useState('');
   const [opened, setOpened] = useState(false);
 
+  const { setShowMenu } = useContext(NavigationContext);
+
   useEffect(() => {
     const url = typeof window !== 'undefined' ? new URL(window.location.href) : '';
     setActive(
@@ -28,6 +31,10 @@ export default function Item({
     );
   }, [active, item]);
 
+  const handleClose = () => {
+    setShowMenu(false);
+  };
+
   const toggleDropDown = (e) => {
     e.target.classList.toggle(styles.active);
     setOpened(e.target.classList.contains(styles.active));
@@ -84,6 +91,7 @@ export default function Item({
           title={item.title}
           rel={item.nofollow && 'nofollow'}
           aria-label={`${item?.title} link`}
+          onClick={handleClose}
         >
           <ItemImage />
           {item.title}

package/src/components/molecules/menu/index.js

@@ -27,6 +27,7 @@ const Menu = ({
     },
   },
   gtmClass = '',
+  customStyles,
 }) => {
   let menuObject;
 
@@ -62,7 +63,10 @@ const Menu = ({
   return (
     <div className={styles.menuContainer}>
       <MenuIcon onClick={handleMenuIconClick} gtmClass="main-menu-gtm" />
-      <ul ref={menuListRef} className={`${menuListClasses} ${showMenu && styles.show}`}>
+      <ul
+        ref={menuListRef}
+        className={`${menuListClasses} ${showMenu && styles.show} ${styles[customStyles]}`}
+      >
         {menuObject &&
           menuObject.children.map((child) => {
             return (
@@ -113,6 +117,7 @@ Menu.propTypes = {
   }).isRequired,
   menu: PropTypes.string.isRequired,
   gtmClass: PropTypes.string,
+  customStyles: PropTypes.string,
 };
 
 export default Menu;

package/src/components/organisms/navigation/index.js

@@ -33,6 +33,7 @@ const Navigation = ({
   },
   sticky = true,
   template,
+  customStyles,
 }) => {
   const navRef = useRef(React.createRef());
   const showMenu = template !== 'ppc';
@@ -72,7 +73,13 @@ const Navigation = ({
           </Link>
           {showMenu && (
             <>
-              <Menu section={section} menu={menu} options={options} gtmClass="main-menu-gtm" />
+              <Menu
+                section={section}
+                menu={menu}
+                options={options}
+                customStyles={customStyles}
+                gtmClass="main-menu-gtm"
+              />
               {hasSearch && <Search className={styles.search} searchIcon={searchIcon} />}
             </>
           )}
@@ -116,6 +123,7 @@ Navigation.propTypes = {
     }),
   }),
   sticky: PropTypes.bool,
+  customStyles: PropTypes.string,
 };
 
 export default Navigation;