gatsby-theme-carbon 4.2.9 → 4.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.2.9",
+  "version": "4.2.10",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/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,22 @@ 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();
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const isLgWindow = window.matchMedia(
+        `(min-width: ${breakpoints.lg.width})`
+      ).matches;
+
+      if (isLgWindow) {
+        toggleNavState('leftNavIsOpen', 'open');
+      } else {
+        toggleNavState('leftNavIsOpen', 'close');
+      }
+    }
+  }, []);
 
   const handleClick = (event, to) => {
     toggleNavState('leftNavIsOpen', 'close');
@@ -48,6 +62,8 @@ const LeftNavItem = (props) => {
           return (
             <>
               <SideNavLink
+                isSideNavExpanded={leftNavIsOpen}
+                tabIndex={!leftNavIsOpen ? -1 : 0}
                 onClick={(e) => handleClick(e, to)}
                 icon={<span>dummy icon</span>}
                 element={Link}
@@ -68,7 +84,9 @@ const LeftNavItem = (props) => {
               icon={<span>dummy icon</span>}
               isActive={isActive} // TODO similar categories
               defaultExpanded={isActive}
-              title={category}>
+              title={category}
+              isSideNavExpanded={leftNavIsOpen}
+              tabIndex={!leftNavIsOpen ? -1 : 0}>
               <SubNavItems
                 onClick={handleClick}
                 items={items}

package/src/components/LeftNav/ResourceLinks.js

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { SideNavLink } from '@carbon/react';
 import { Link } from 'gatsby';
 import { Launch as LaunchIcon } from '@carbon/react/icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { breakpoints } from '@carbon/elements';
 
 import { outboundLink, divider, dividerSpace } from './LeftNav.module.scss';
+import NavContext from '../../util/context/NavContext';
 
 const LeftNavResourceLinks = ({
   links,
   shouldOpenNewTabs,
   includeDividerSpace = true,
 }) => {
+  const { toggleNavState, leftNavIsOpen } = useContext(NavContext);
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const isLgWindow = window.matchMedia(
+        `(min-width: ${breakpoints.lg.width})`
+      ).matches;
+
+      if (isLgWindow) {
+        toggleNavState('leftNavIsOpen', 'open');
+      } else {
+        toggleNavState('leftNavIsOpen', 'close');
+      }
+    }
+  }, []);
+
   if (!links) return null;
 
   const shouldOpenNewTabsProps = {
@@ -37,6 +54,7 @@ const LeftNavResourceLinks = ({
             href={href}
             className={cx({ [outboundLink]: outbound })}
             element={outbound ? 'a' : Link}
+            tabIndex={!leftNavIsOpen ? -1 : 0}
             {...shouldOpenNewTabsProps}>
             {title}
           </SideNavLink>