Merge pull request #6779 from tudi2d/sidebar-improvements

Smaller sidebar adjustment

.changeset/tender-dingos-burn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Change the default hover experience for the sidebar to be not jumpy & add visual separation between sidebar & Entity Page tabs for dark mode.

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

@@ -42,6 +42,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     msOverflowStyle: 'none',
     scrollbarWidth: 'none',
     width: sidebarConfig.drawerWidthClosed,
+    borderRight: `1px solid #383838`,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.shortest,
@@ -60,14 +61,11 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
       duration: theme.transitions.duration.shorter,
     }),
   },
-  drawerPeek: {
-    width: sidebarConfig.drawerWidthClosed + 4,
-  },
 }));
 
 enum State {
   Closed,
-  Peek,
+  Idle,
   Open,
 }
 
@@ -103,7 +101,7 @@ export const Sidebar = ({
         setState(State.Open);
       }, openDelayMs);
 
-      setState(State.Peek);
+      setState(State.Idle);
     }
   };
 
@@ -115,7 +113,7 @@ export const Sidebar = ({
       clearTimeout(hoverTimerRef.current);
       hoverTimerRef.current = undefined;
     }
-    if (state === State.Peek) {
+    if (state === State.Idle) {
       setState(State.Closed);
     } else if (state === State.Open) {
       hoverTimerRef.current = window.setTimeout(() => {
@@ -143,7 +141,6 @@ export const Sidebar = ({
       >
         <div
           className={clsx(classes.drawer, {
-            [classes.drawerPeek]: state === State.Peek,
             [classes.drawerOpen]: isOpen,
           })}
         >

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

@@ -25,7 +25,7 @@ export const sidebarConfig = {
   drawerWidthOpen: 224,
   // As per NN/g's guidance on timing for exposing hidden content
   // See https://www.nngroup.com/articles/timing-exposing-content/
-  defaultOpenDelayMs: 300,
+  defaultOpenDelayMs: 100,
   defaultCloseDelayMs: 0,
   defaultFadeDuration: 200,
   logoHeight: 32,