Minor adjustments to Sidebar UX

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

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 ${theme.palette.navigation.divider}`,
     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/Items.tsx

@@ -344,13 +344,15 @@ export const SidebarSpacer = styled('div')({
   height: 8,
 });
 
-export const SidebarDivider = styled('hr')({
-  height: 1,
-  width: '100%',
-  background: '#383838',
-  border: 'none',
-  margin: '12px 0px',
-});
+export const SidebarDivider = styled('hr')(
+  ({ theme }: { theme: BackstageTheme }) => ({
+    height: 1,
+    width: '100%',
+    background: theme.palette.navigation.divider,
+    border: 'none',
+    margin: '12px 0px',
+  }),
+);
 
 const styledScrollbar = (theme: Theme): CreateCSSProperties => ({
   overflowY: 'auto',

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,

packages/theme/src/themes.ts

@@ -66,6 +66,7 @@ export const lightTheme = createTheme({
       background: '#171717',
       indicator: '#9BF0E1',
       color: '#b5b5b5',
+      divider: '#383838',
       selectedColor: '#FFF',
     },
     pinSidebarButton: {
@@ -132,6 +133,7 @@ export const darkTheme = createTheme({
       background: '#424242',
       indicator: '#9BF0E1',
       color: '#b5b5b5',
+      divider: '#383838',
       selectedColor: '#FFF',
     },
     pinSidebarButton: {

packages/theme/src/types.ts

@@ -47,6 +47,7 @@ type PaletteAdditions = {
     background: string;
     indicator: string;
     color: string;
+    divider: string;
     selectedColor: string;
   };
   tabbar: {