From 5b27a6a4c91467122c32571871e690ba83e93038 Mon Sep 17 00:00:00 2001
From: Anton Kastritskiy <antonk52@meta.com>
Date: Tue, 18 Jul 2023 03:52:34 -0700
Subject: [PATCH] toggle left sidebar button

Reviewed By: elboman

Differential Revision: D47399778

fbshipit-source-id: 842a6900f05e629c4c4fca60928fb9ab107b46fd
---
 .../src/sandy-chrome/LeftRail.tsx             | 27 +------------
 .../src/sandy-chrome/Navbar.tsx               | 40 +++++++++++++++----
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
index 243da5d2b..e504828b2 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
@@ -20,12 +20,9 @@ import {
   BugOutlined,
   ApiOutlined,
 } from '@ant-design/icons';
-import {SidebarLeft, SidebarRight} from './SandyIcons';
+import {SidebarRight} from './SandyIcons';
 import {useDispatch, useStore} from '../utils/useStore';
-import {
-  toggleLeftSidebarVisible,
-  toggleRightSidebarVisible,
-} from '../reducers/application';
+import {toggleRightSidebarVisible} from '../reducers/application';
 import {
   theme,
   Layout,
@@ -201,7 +198,6 @@ export const LeftRail = withTrackingScope(function LeftRail({
           <LaunchEmulatorButton />
           <SetupDoctorButton />
           <RightSidebarToggleButton />
-          <LeftSidebarToggleButton />
           <ExportEverythingEverywhereAllAtOnceButton />
           <ExtrasMenu />
         </Layout.Container>
@@ -332,25 +328,6 @@ function ExtrasMenu() {
   );
 }
 
-function LeftSidebarToggleButton() {
-  const dispatch = useDispatch();
-  const mainMenuVisible = useStore(
-    (state) => state.application.leftSidebarVisible,
-  );
-
-  return (
-    <LeftRailButton
-      icon={<SidebarLeft />}
-      small
-      title="Left Sidebar Toggle"
-      toggled={mainMenuVisible}
-      onClick={() => {
-        dispatch(toggleLeftSidebarVisible());
-      }}
-    />
-  );
-}
-
 function RightSidebarToggleButton() {
   const dispatch = useDispatch();
   const rightSidebarAvailable = useStore(
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index 3b9bc0dee..ecfac160a 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
@@ -9,7 +9,7 @@
 
 import {Layout, styled, theme, useValue} from 'flipper-plugin';
 import React, {cloneElement, useCallback, useState} from 'react';
-import {useStore} from '../utils/useStore';
+import {useDispatch, useStore} from '../utils/useStore';
 import config from '../fb-stubs/config';
 import {isConnected, currentUser, logoutUser} from '../fb-stubs/user';
 import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet';
@@ -27,10 +27,12 @@ import {
   VideoCameraOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
+import {toggleLeftSidebarVisible} from '../reducers/application';
 
 export function Navbar() {
   return (
     <Layout.Horizontal
+      borderBottom
       style={{
         width: '100%',
         height: 68,
@@ -38,10 +40,9 @@ export function Navbar() {
         alignItems: 'center',
         justifyContent: 'space-between',
         background: theme.backgroundDefault,
-        borderBottom: `solid 1px ${theme.dividerColor}`,
       }}>
       <Layout.Horizontal style={{gap: 4}}>
-        <NavbarButton label="Toggle Sidebar" icon={LayoutOutlined} />
+        <LeftSidebarToggleButton />
         <button>device picker</button>
         <NavbarButton label="Screenshot" icon={CameraOutlined} />
         <NavbarButton label="Record" icon={VideoCameraOutlined} />
@@ -59,27 +60,52 @@ export function Navbar() {
   );
 }
 
+function LeftSidebarToggleButton() {
+  const dispatch = useDispatch();
+  const mainMenuVisible = useStore(
+    (state) => state.application.leftSidebarVisible,
+  );
+
+  return (
+    <NavbarButton
+      label="Toggle Sidebar"
+      icon={LayoutOutlined}
+      toggled={!mainMenuVisible}
+      onClick={() => {
+        dispatch(toggleLeftSidebarVisible());
+      }}
+    />
+  );
+}
+
 function NavbarButton({
   icon: Icon,
   label,
-  selected,
+  toggled = false,
+  onClick,
 }: {
   icon: typeof LoginOutlined;
   label: string;
   selected?: boolean;
+  // TODO remove optional
+  onClick?: () => void;
+  toggled?: boolean;
 }) {
+  const color = toggled ? theme.primaryColor : theme.textColorActive;
   return (
     <Button
-      ghost={!selected}
+      aria-pressed={toggled}
+      ghost
+      onClick={onClick}
       style={{
-        color: theme.textColorPrimary,
+        color,
         boxShadow: 'none',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         height: 'auto',
       }}>
-      <Icon style={{color: theme.textColorPrimary, fontSize: 24}} />
+      <Icon style={{color, fontSize: 24}} />
       <span
         style={{
           margin: 0,