diff --git a/.changeset/dull-bulldogs-laugh.md b/.changeset/dull-bulldogs-laugh.md
new file mode 100644
index 0000000000..f49aa694b6
--- /dev/null
+++ b/.changeset/dull-bulldogs-laugh.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Create a short delay when `` is opened
diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
index 1e9afe86ef..029c3386d2 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
+++ b/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 (
diff --git a/packages/core-components/src/layout/Sidebar/config.ts b/packages/core-components/src/layout/Sidebar/config.ts
index dbcdb7d788..3796898fc7 100644
--- a/packages/core-components/src/layout/Sidebar/config.ts
+++ b/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 =