From 7c0347b6dff58d4cbe1c2dd316cca27cd35254bb Mon Sep 17 00:00:00 2001
From: Matt Watson <mwatson@renci.org>
Date: Thu, 22 Aug 2024 11:26:38 -0400
Subject: [PATCH] track active tray with key

---
 src/components/sidebar/sidebar.js | 34 +++++++++++++++----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index b6d66eb0..66f08ec3 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -25,18 +25,18 @@ sidebarMenuItemKeys.lower.sort((a, b) =>
 
 export const Sidebar = () => {
   const theme = useTheme();
-  const [activeIndex, setActiveIndex] = useState(-1);
+  const [activeKey, setActiveKey] = useState(null);
 
-  const handleClickMenuItem = useCallback(newIndex => {
+  const handleClickMenuItem = useCallback(newKey => {
     // if the incoming new index equals the old index,
     // then the user wants to close the currently open tray.
-    if (newIndex === activeIndex) {
-      setActiveIndex(-1);
+    if (newKey === activeKey) {
+      setActiveKey(null);
       return;
     }
     // otherwise, open desired tray.
-    setActiveIndex(newIndex);
-  }, [activeIndex]);
+    setActiveKey(newKey);
+  }, [activeKey]);
 
   return (
     <Fragment>
@@ -50,12 +50,12 @@ export const Sidebar = () => {
           maxWidth: '68px',
           overflow: 'hidden',
           p: 0,
-          backgroundColor: activeIndex === -1
+          backgroundColor: activeKey === -1
             ? `rgba(${ theme.palette.mainChannel } / 0.2)`
             : `rgba(${ theme.palette.mainChannel } / 1.0)`,
           // a drop shadow looks nice. we'll remove it if a tray is open,
           // as they should appear on the same plane.
-          filter: activeIndex === -1 ? 'drop-shadow(0 0 8px rgba(0, 0, 0, 0.2))' : 'drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2))',
+          filter: activeKey === -1 ? 'drop-shadow(0 0 8px rgba(0, 0, 0, 0.2))' : 'drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2))',
           // similarly, here.
           '&:hover': {
             backgroundColor: `rgba(${ theme.palette.mainChannel } / 1.0)`,
@@ -73,14 +73,14 @@ export const Sidebar = () => {
         <List>
             {
               sidebarMenuItemKeys.upper
-                .map((key, index) => {
+                .map((key) => {
                   return (
                     <MenuItem
                       key={ `menu-item-${ key }` }
-                      active={ index === activeIndex }
+                      active={ key === activeKey }
                       title={ SidebarTrays[key].title }
                       Icon={ SidebarTrays[key].icon }
-                      onClick={ () => handleClickMenuItem(index) }
+                      onClick={ () => handleClickMenuItem(key) }
                     />
                   );
                 })
@@ -88,14 +88,14 @@ export const Sidebar = () => {
             <Box sx={{ flex: 1 }} /> {/**/}
             {
               sidebarMenuItemKeys.lower
-                .map((key, index) => {
+                .map((key) => {
                   return (
                     <MenuItem
                       key={ `menu-item-${ key }` }
-                      active={ index === activeIndex }
+                      active={ key === activeKey }
                       title={ SidebarTrays[key].title }
                       Icon={ SidebarTrays[key].icon }
-                      onClick={ () => handleClickMenuItem(index) }
+                      onClick={ () => handleClickMenuItem(key) }
                     />
                   );
                 })
@@ -104,14 +104,14 @@ export const Sidebar = () => {
         
       </Sheet>
       {
-        Object.keys(SidebarTrays).map((key, index) => {
+        Object.keys(SidebarTrays).map((key) => {
           return (
             <Tray
               key={ `tray-${ key }` }
-              active={ activeIndex === index }
+              active={ activeKey === key }
               title={ SidebarTrays[key].title }
               Contents={ SidebarTrays[key].trayContents }
-              closeHandler={ () => setActiveIndex(-1) }
+              closeHandler={ () => setActiveKey(-1) }
             />
           );
         })