From 67b4b53c20c41232bb6d57f9d9943b48c84a3b3f Mon Sep 17 00:00:00 2001
From: Daniel Kohli <drkohli@fb.com>
Date: Wed, 3 Nov 2021 09:47:20 -0700
Subject: [PATCH] Rotate Styling for Vertical Sidebar

Summary: - We are using the `Sidebar` component in our `LogViewer` implementation and we noticed that it needed some styling updates to be used properly as a vertical `Sidebar`.

Reviewed By: mweststrate

Differential Revision: D32083159

fbshipit-source-id: 441f3972ae900b5d5f353d3c7b56117c489850ba
---
 desktop/flipper-plugin/src/ui/Sidebar.tsx | 52 +++++++++++++----------
 1 file changed, 30 insertions(+), 22 deletions(-)

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 = ({
         </Layout.Right>
       );
     case 'bottom':
-      // TODO: needs rotated styling
       return (
         <Layout.Top>
-          <VerticalGutter enabled={!!children} />
+          <VerticalGutter enabled={!!children} rotateStyling />
           {children}
         </Layout.Top>
       );
     case 'top':
-      // TODO: needs rotated styling
       return (
         <Layout.Bottom>
           {children}
-          <VerticalGutter enabled={!!children} />
+          <VerticalGutter enabled={!!children} rotateStyling />
         </Layout.Bottom>
       );
   }
 };
 
-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}) => (
-  <VerticalGutterContainer enabled={enabled}>
+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;
+}) => (
+  <VerticalGutterContainer enabled={enabled} rotateStyling={rotateStyling}>
     <MoreOutlined />
   </VerticalGutterContainer>
 );