Merge pull request #8813 from hiba-aldalaty/hdalaty/bug-fix-sidebar-submenu-delay

Bug fix: Create a delay when a Sidebar submenu opens

.changeset/dull-bulldogs-laugh.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Create a short delay when `<SidebarSubmenu/>` is opened

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

@@ -16,7 +16,7 @@
 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, useState } from 'react';
 import {
   SidebarItemWithSubmenuContext,
   sidebarConfig,
@@ -48,7 +48,7 @@ const useStyles = (props: { left: number }) =>
       scrollbarWidth: 'none',
       cursor: 'default',
       width: submenuConfig.drawerWidthClosed,
-      borderRight: `1px solid #383838`,
+      transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`,
       '& > *': {
         flexShrink: 0,
       },
@@ -91,10 +91,16 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
   const classes = useStyles({ left: left })();
 
   const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext);
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+
+  useEffect(() => {
+    setIsSubmenuOpen(isHoveredOn);
+  }, [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 =