Issues/70 configurable links in mega menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasonrundell/react-mega-menu",
-  "version": "1.6.1",
+  "version": "1.7.2",
   "author": "jasonrundell <[email protected]>",
   "source": "./src/index.js",
   "main": "lib/index.js",
@@ -9,10 +9,11 @@
     "format": "prettier --write src/**/*.{js,jsx}"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
     "sass": "^1.54.5",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
@@ -50,6 +51,6 @@
     "navigation",
     "mega",
     "menu",
-    "megamenu"
+    "mega menu"
   ]
 }

src/components/Hamburger.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledHamburger = styled.button`
   border: none;

src/components/Logo.jsx

@@ -1,15 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})` // Example breakpoint for 'large'. You can adjust this value.
-    // Add other breakpoints as needed
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledLogo = styled.img`
   display: flex;

src/components/MainList.jsx

@@ -1,15 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})` // Example breakpoint for 'large'. You can adjust this value.
-    // Add other breakpoints as needed
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledList = styled.ul`
   position: absolute;

src/components/MainNavItem.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledMainNavItem = styled.li`
   list-style: none;

src/components/MainNavItemLink.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledMainNavItemLink = styled.a`
   width: 100%;

src/components/MegaList.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledMegaList = styled.ul`
   position: absolute;

src/components/Nav.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledNav = styled.nav`
   position: absolute;

src/components/NavItem.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledNavItem = styled.li`
   list-style: none;
@@ -34,7 +27,6 @@ const StyledNavItem = styled.li`
   ${({ isHeading }) =>
     isHeading &&
     `
-    font-weight: 700;
     ${respondTo('large')} {
       display: none;
     }

src/components/NavItemLink.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StylesNavItemLink = styled.a`
   width: 100%;

src/components/NavList.jsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})`
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledNavList = styled.ul`
   position: absolute;

src/components/TopBar.jsx

@@ -1,15 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
-import { breakpoints as BreakPoints } from '../config/styles'
-
-const respondTo = (breakpoint) => {
-  const breakpoints = {
-    large: `@media (min-width: ${BreakPoints.large['min-width']})` // Example breakpoint for 'large'. You can adjust this value.
-    // Add other breakpoints as needed
-  }
-  return breakpoints[breakpoint] || null
-}
+import { respondTo } from '../helpers/responsive'
 
 const StyledTopBar = styled.div`
   position: absolute;

src/helpers/a11y.js

@@ -0,0 +1,12 @@
+export const click = (e) => {
+  const code = e.charCode || e.keyCode
+  if (code === 32 || code === 13) {
+    return true
+  }
+}
+
+export const escape = (e, resetMenus) => {
+  if (e.keyCode === 27) {
+    resetMenus()
+  }
+}