From 26af46604628a579d87b635830e3b6deb852c117 Mon Sep 17 00:00:00 2001 From: guidari Date: Fri, 17 Jan 2025 10:08:52 -0300 Subject: [PATCH 1/4] fix: fixed tab navigation in SideNav --- .../src/components/LeftNav/LeftNavItem.js | 20 ++++++++++++++++--- .../src/components/LeftNav/ResourceLinks.js | 16 ++++++++++++++- yarn.lock | 4 ++-- 3 files changed, 34 insertions(+), 6 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js index cf3b9c0c6..1f6cefa1c 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js @@ -1,8 +1,9 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect } from 'react'; import { Link } from 'gatsby'; import { Location } from '@reach/router'; import cx from 'classnames'; import { useNetworkState } from 'react-use'; +import { breakpoints } from '@carbon/elements'; import { SideNavLink, SideNavMenu, SideNavMenuItem } from '@carbon/react'; @@ -16,9 +17,18 @@ export const SERVICE_WORKER_UPDATE_FOUND = 'GTC-ServiceWorkerUpdateFound'; const LeftNavItem = (props) => { const { items, category, hasDivider } = props; - const { toggleNavState } = useContext(NavContext); + const { toggleNavState, leftNavIsOpen } = useContext(NavContext); const { isServiceWorkerEnabled } = useMetadata(); const isOnline = useNetworkState(); + const isLgWindow = window.matchMedia(`(min-width: ${breakpoints.lg.width} )`); + + useEffect(() => { + if (isLgWindow) { + toggleNavState('leftNavIsOpen', 'open'); + } else { + toggleNavState('leftNavIsOpen', 'close'); + } + }, []); const handleClick = (event, to) => { toggleNavState('leftNavIsOpen', 'close'); @@ -48,6 +58,8 @@ const LeftNavItem = (props) => { return ( <> handleClick(e, to)} icon={dummy icon} element={Link} @@ -68,7 +80,9 @@ const LeftNavItem = (props) => { icon={dummy icon} isActive={isActive} // TODO similar categories defaultExpanded={isActive} - title={category}> + title={category} + isSideNavExpanded={leftNavIsOpen} + tabIndex={!leftNavIsOpen ? -1 : 0}> { + const { toggleNavState, leftNavIsOpen } = useContext(NavContext); + const isLgWindow = window.matchMedia(`(min-width: ${breakpoints.lg.width} )`); + + useEffect(() => { + if (isLgWindow) { + toggleNavState('leftNavIsOpen', 'open'); + } else { + toggleNavState('leftNavIsOpen', 'close'); + } + }, []); + if (!links) return null; const shouldOpenNewTabsProps = { @@ -37,6 +50,7 @@ const LeftNavResourceLinks = ({ href={href} className={cx({ [outboundLink]: outbound })} element={outbound ? 'a' : Link} + tabIndex={!leftNavIsOpen ? -1 : 0} {...shouldOpenNewTabsProps}> {title} diff --git a/yarn.lock b/yarn.lock index 9f6e0d27a..ce3389fd2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10344,7 +10344,7 @@ __metadata: dependencies: "@carbon/icons-react": "npm:^11.43.0" gatsby: "npm:^5.13.6" - gatsby-theme-carbon: "npm:^4.2.4" + gatsby-theme-carbon: "npm:^4.2.5" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" languageName: unknown @@ -11644,7 +11644,7 @@ __metadata: languageName: unknown linkType: soft -"gatsby-theme-carbon@npm:^4.2.4, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": +"gatsby-theme-carbon@npm:^4.2.5, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": version: 0.0.0-use.local resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon" dependencies: From 5bcdfa619d4c2cedd72f91b7aadd06d91c19d778 Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Fri, 17 Jan 2025 11:48:48 -0300 Subject: [PATCH 2/4] Update packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js Co-authored-by: Alison Joseph --- .../src/components/LeftNav/LeftNavItem.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js index 1f6cefa1c..b2ac50f62 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js @@ -20,15 +20,19 @@ const LeftNavItem = (props) => { const { toggleNavState, leftNavIsOpen } = useContext(NavContext); const { isServiceWorkerEnabled } = useMetadata(); const isOnline = useNetworkState(); - const isLgWindow = window.matchMedia(`(min-width: ${breakpoints.lg.width} )`); - useEffect(() => { - if (isLgWindow) { - toggleNavState('leftNavIsOpen', 'open'); - } else { - toggleNavState('leftNavIsOpen', 'close'); + if (typeof window !== 'undefined') { + const isLgWindow = window.matchMedia( + `(min-width: ${breakpoints.lg.width})` + ).matches; + + if (isLgWindow) { + toggleNavState('leftNavIsOpen', 'open'); + } else { + toggleNavState('leftNavIsOpen', 'close'); + } } - }, []); + }, [toggleNavState]); const handleClick = (event, to) => { toggleNavState('leftNavIsOpen', 'close'); From 0319f64b39b53f98850f0a80405d64c2c8cd168c Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Fri, 17 Jan 2025 11:48:57 -0300 Subject: [PATCH 3/4] Update packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js Co-authored-by: Alison Joseph --- .../src/components/LeftNav/ResourceLinks.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js b/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js index 99024a041..76cbbbe84 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js @@ -15,15 +15,19 @@ const LeftNavResourceLinks = ({ includeDividerSpace = true, }) => { const { toggleNavState, leftNavIsOpen } = useContext(NavContext); - const isLgWindow = window.matchMedia(`(min-width: ${breakpoints.lg.width} )`); - useEffect(() => { - if (isLgWindow) { - toggleNavState('leftNavIsOpen', 'open'); - } else { - toggleNavState('leftNavIsOpen', 'close'); + if (typeof window !== 'undefined') { + const isLgWindow = window.matchMedia( + `(min-width: ${breakpoints.lg.width})` + ).matches; + + if (isLgWindow) { + toggleNavState('leftNavIsOpen', 'open'); + } else { + toggleNavState('leftNavIsOpen', 'close'); + } } - }, []); + }, [toggleNavState]); if (!links) return null; From 0133e0e734d3dd98baaabb36597cc24d27d50de0 Mon Sep 17 00:00:00 2001 From: guidari Date: Fri, 17 Jan 2025 11:58:52 -0300 Subject: [PATCH 4/4] fix: fixed hamburger menu with infinite looping --- .../gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js | 2 +- .../gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js index b2ac50f62..78acd308c 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js @@ -32,7 +32,7 @@ const LeftNavItem = (props) => { toggleNavState('leftNavIsOpen', 'close'); } } - }, [toggleNavState]); + }, []); const handleClick = (event, to) => { toggleNavState('leftNavIsOpen', 'close'); diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js b/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js index 76cbbbe84..5b78425d0 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js @@ -27,7 +27,7 @@ const LeftNavResourceLinks = ({ toggleNavState('leftNavIsOpen', 'close'); } } - }, [toggleNavState]); + }, []); if (!links) return null;