From ad6ea644c03ae99635657d984411461f54aa674d Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Thu, 17 Mar 2022 17:01:32 +0100
Subject: [PATCH] M #~: Add color to sidebar selected item when not fixed
 (#1853)

(cherry picked from commit 8ab421fb1dfaa0c6ea17983c65a86ad8bcff4315)
---
 .../components/Sidebar/SidebarCollapseItem.js | 34 ++++++++++++++-----
 .../src/client/components/Sidebar/styles.js   | 10 ++++++
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js b/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
index 2202152b1e..07bba13c5d 100644
--- a/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
+++ b/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
@@ -13,8 +13,7 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-/* eslint-disable jsdoc/require-jsdoc */
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo, ReactElement } from 'react'
 import PropTypes from 'prop-types'
 import { useLocation } from 'react-router-dom'
 import clsx from 'clsx'
@@ -34,26 +33,43 @@ import { useGeneral } from 'client/features/General'
 import SidebarLink from 'client/components/Sidebar/SidebarLink'
 import sidebarStyles from 'client/components/Sidebar/styles'
 
+/**
+ * Renders nested list options for sidebar.
+ *
+ * @param {object} props - Props
+ * @param {string} props.label - Label
+ * @param {object[]} props.routes - Nested list of routes
+ * @param {ReactElement} props.icon - Icon
+ * @returns {ReactElement} Sidebar option that includes other list of routes
+ */
 const SidebarCollapseItem = ({ label = '', routes = [], icon: Icon }) => {
   const classes = sidebarStyles()
   const { pathname } = useLocation()
   const { isFixMenu } = useGeneral()
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up('lg'))
-
   const [expanded, setExpanded] = useState(() => false)
 
+  const hasRouteSelected = useMemo(
+    () => routes.some(({ path }) => pathname === path),
+    [routes, pathname]
+  )
+
   const handleExpand = () => setExpanded(!expanded)
 
   useEffect(() => {
-    if (isFixMenu && !expanded) {
-      const hasRouteSelected = routes.some(({ path }) => pathname === path)
-      hasRouteSelected && setExpanded(true)
-    }
-  }, [isFixMenu])
+    // force expanded
+    isFixMenu && !expanded && hasRouteSelected && setExpanded(true)
+  }, [isFixMenu, expanded, hasRouteSelected])
+
+  console.log({ expanded, hasRouteSelected })
 
   return (
     <>
-      <ListItemButton onClick={handleExpand}>
+      <ListItemButton
+        className={classes.parentSubItem}
+        onClick={handleExpand}
+        selected={(!isFixMenu || !expanded) && hasRouteSelected}
+      >
         {Icon && (
           <ListItemIcon>
             <Icon />
diff --git a/src/fireedge/src/client/components/Sidebar/styles.js b/src/fireedge/src/client/components/Sidebar/styles.js
index 7e5d0c13c8..f23f4d45fd 100644
--- a/src/fireedge/src/client/components/Sidebar/styles.js
+++ b/src/fireedge/src/client/components/Sidebar/styles.js
@@ -14,6 +14,7 @@
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
 import makeStyles from '@mui/styles/makeStyles'
+import { alpha } from '@mui/material'
 import { sidebar, toolbar } from 'client/theme/defaults'
 
 export default makeStyles((theme) => ({
@@ -43,6 +44,14 @@ export default makeStyles((theme) => ({
           easing: theme.transitions.easing.sharp,
           duration: theme.transitions.duration.enteringScreen,
         }),
+        '& $parentSubItem': {
+          '&.Mui-selected': {
+            backgroundColor: alpha(theme.palette.secondary.main, 0.2),
+          },
+          '&.Mui-selected:hover': {
+            backgroundColor: alpha(theme.palette.secondary.main, 0.3),
+          },
+        },
         '& #logo__text': {
           visibility: 'visible',
         },
@@ -120,5 +129,6 @@ export default makeStyles((theme) => ({
       color: theme.palette.secondary.light,
     },
   },
+  parentSubItem: {},
   subItemWrapper: {},
 }))