Merge pull request #26053 from mahendra1290/fix-25888-mahendra

Fix: UI Issue with Sidebar Submenu Overlapping When Sidebar is Pinned

.changeset/honest-impalas-rescue.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed a bug in the `SidebarSubmenu` core component that caused the nested menu to overlap with the sidebar when the user hovers over the pinned sidebar.

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

@@ -46,11 +46,12 @@ const useStyles = makeStyles<
       flexFlow: 'column nowrap',
       alignItems: 'flex-start',
       position: 'fixed',
+      opacity: 0,
       [theme.breakpoints.up('sm')]: {
         marginLeft: props.left,
-        transition: theme.transitions.create('margin-left', {
+        transition: theme.transitions.create(['margin-left', 'opacity'], {
           easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.shortest,
+          duration: props.submenuConfig.defaultOpenDelayMs,
         }),
       },
       top: 0,
@@ -71,6 +72,8 @@ const useStyles = makeStyles<
       },
     }),
     drawerOpen: props => ({
+      marginLeft: props.left,
+      opacity: 1,
       width: props.submenuConfig.drawerWidthOpen,
       [theme.breakpoints.down('xs')]: {
         width: '100%',