diff --git a/desktop/flipper-plugin/src/ui/Sidebar.tsx b/desktop/flipper-plugin/src/ui/Sidebar.tsx index 414ba66e3..31f49fdd3 100644 --- a/desktop/flipper-plugin/src/ui/Sidebar.tsx +++ b/desktop/flipper-plugin/src/ui/Sidebar.tsx @@ -230,42 +230,50 @@ const GutterWrapper = ({ ); case 'bottom': - // TODO: needs rotated styling return ( - + {children} ); case 'top': - // TODO: needs rotated styling return ( {children} - + ); } }; -const VerticalGutterContainer = styled('div')<{enabled: boolean}>( - ({enabled}) => ({ - width: theme.space.large, - minWidth: theme.space.large, - cursor: enabled ? undefined : 'default', // hide cursor from interactive container - color: enabled ? theme.textColorPlaceholder : theme.backgroundWash, - fontSize: '16px', - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - background: theme.backgroundWash, - ':hover': { - background: enabled ? theme.dividerColor : undefined, - }, - }), -); -const VerticalGutter = ({enabled}: {enabled: boolean}) => ( - +const VerticalGutterContainer = styled('div')<{ + enabled: boolean; + rotateStyling?: boolean; +}>(({enabled, rotateStyling}) => ({ + width: rotateStyling ? '100%' : theme.space.large, + minWidth: rotateStyling ? '100%' : theme.space.large, + cursor: enabled ? undefined : 'default', // hide cursor from interactive container + color: enabled ? theme.textColorPlaceholder : theme.backgroundWash, + fontSize: '16px', + display: 'flex', + flexDirection: rotateStyling ? 'column' : 'row', + alignItems: 'center', + background: theme.backgroundWash, + ':hover': { + background: enabled ? theme.dividerColor : undefined, + }, + '& svg': { + transform: rotateStyling ? 'rotate(90deg)' : undefined, + }, +})); +const VerticalGutter = ({ + enabled, + rotateStyling, +}: { + enabled: boolean; + rotateStyling?: boolean; +}) => ( + );