Add open delay for submenus in sidebar

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /*
  * Copyright 2021 The Backstage Authors
  *
@@ -16,7 +17,13 @@
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import classnames from 'classnames';
-import React, { ReactNode, useContext } from 'react';
+import React, {
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   SidebarItemWithSubmenuContext,
   sidebarConfig,
@@ -48,7 +55,6 @@ const useStyles = (props: { left: number }) =>
       scrollbarWidth: 'none',
       cursor: 'default',
       width: submenuConfig.drawerWidthClosed,
-      borderRight: `1px solid #383838`,
       '& > *': {
         flexShrink: 0,
       },
@@ -91,10 +97,25 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
   const classes = useStyles({ left: left })();
 
   const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext);
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+  const hoverTimerRef = useRef<number>();
+
+  useEffect(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = undefined;
+    }
+    if (isHoveredOn) {
+      hoverTimerRef.current = window.setTimeout(() => {
+        hoverTimerRef.current = undefined;
+        setIsSubmenuOpen(true);
+      }, submenuConfig.defaultOpenDelayMs);
+    }
+  }, [isHoveredOn]);
   return (
     <div
       className={classnames(classes.drawer, {
-        [classes.drawerOpen]: isHoveredOn,
+        [classes.drawerOpen]: isSubmenuOpen,
       })}
     >
       <Typography variant="h5" className={classes.title}>

packages/core-components/src/layout/Sidebar/config.ts

@@ -40,18 +40,7 @@ export const sidebarConfig = {
 export const submenuConfig = {
   drawerWidthClosed: 0,
   drawerWidthOpen: 202,
-  // As per NN/g's guidance on timing for exposing hidden content
-  // See https://www.nngroup.com/articles/timing-exposing-content/
-  defaultOpenDelayMs: 100,
-  defaultCloseDelayMs: 0,
-  defaultFadeDuration: 200,
-  logoHeight: 32,
-  iconContainerWidth: drawerWidthClosed,
-  iconSize: drawerWidthClosed - iconPadding * 2,
-  iconPadding,
-  selectedIndicatorWidth: 3,
-  userBadgePadding,
-  userBadgeDiameter: drawerWidthClosed - userBadgePadding * 2,
+  defaultOpenDelayMs: sidebarConfig.defaultOpenDelayMs + 200,
 };
 
 export const SIDEBAR_INTRO_LOCAL_STORAGE =