Passed focus to SideNavExpanded when opened

lib/components/SideNav/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import styled from "styled-components";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
@@ -500,6 +500,16 @@ const SideNav = ({ items, sideNavHeight }) => {
     return () => window.removeEventListener("resize", debounceResize);
   });
 
+  // Initialize a ref for SideNavExpanded
+  const expandedRef = useRef(null);
+
+  // Use a useEffect to focus on the expanded item
+  useEffect(() => {
+    if (expandedItem !== null && expandedRef.current) {
+      expandedRef.current.focus();
+    }
+  }, [expandedItem]);
+
   // Toggle nav item names on click of panel control button
   // const [showItemNames, setShowItemNames] = useState(false);
   // const toggleItemNames = () => {
@@ -675,6 +685,7 @@ const SideNav = ({ items, sideNavHeight }) => {
             <PanelControl
               onClick={() => handleItemClick(allItems[expandedItem])}
               aria-label="toggle panel"
+              ref={expandedRef}
             >
               {isGreaterThan900 === true ? (
                 <Icon icon={["fas", "chevron-left"]} />