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;
+}) => (
+
);