From c9394b67bcd31b4cbec91cdb079c7d3022be63e2 Mon Sep 17 00:00:00 2001
From: hiba-aldalaty <hibaaldalaty@gmail.com>
Date: Mon, 10 Jan 2022 15:03:31 +0000
Subject: [PATCH] Use css transition to create submenu open delay instead of js

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>
---
 .../src/layout/Sidebar/SidebarSubmenu.tsx         | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
index 223065cfc9..f5fe29492c 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
+++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 /*
  * Copyright 2021 The Backstage Authors
  *
@@ -55,6 +54,7 @@ const useStyles = (props: { left: number }) =>
       scrollbarWidth: 'none',
       cursor: 'default',
       width: submenuConfig.drawerWidthClosed,
+      transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`,
       '& > *': {
         flexShrink: 0,
       },
@@ -98,20 +98,11 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
 
   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);
-    }
+    setIsSubmenuOpen(isHoveredOn);
   }, [isHoveredOn]);
+
   return (
     <div
       className={classnames(classes.drawer, {