diff --git a/desktop/flipper-ui-core/src/reducers/application.tsx b/desktop/flipper-ui-core/src/reducers/application.tsx index 762653f3a..e7980d62e 100644 --- a/desktop/flipper-ui-core/src/reducers/application.tsx +++ b/desktop/flipper-ui-core/src/reducers/application.tsx @@ -37,6 +37,7 @@ export type ShareType = { } & SubShareType; export type State = { + hasLeftSidebar: boolean; leftSidebarVisible: boolean; rightSidebarVisible: boolean; rightSidebarAvailable: boolean; @@ -48,6 +49,7 @@ export type State = { }; type BooleanActionType = + | 'hasLeftSidebar' | 'leftSidebarVisible' | 'rightSidebarVisible' | 'rightSidebarAvailable'; @@ -78,6 +80,7 @@ export type Action = }; export const initialState: () => State = () => ({ + hasLeftSidebar: true, leftSidebarVisible: true, rightSidebarVisible: true, rightSidebarAvailable: false, @@ -110,6 +113,7 @@ export default function reducer( ): State { state = state || initialState(); if ( + action.type === 'hasLeftSidebar' || action.type === 'leftSidebarVisible' || action.type === 'rightSidebarVisible' || action.type === 'rightSidebarAvailable' @@ -175,6 +179,11 @@ export const toggleLeftSidebarVisible = (payload?: boolean): Action => ({ payload, }); +export const toggleHasLeftSidebar = (payload?: boolean): Action => ({ + type: 'hasLeftSidebar', + payload, +}); + export const toggleRightSidebarVisible = (payload?: boolean): Action => ({ type: 'rightSidebarVisible', payload, diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx index 68039a7a6..15ed23a57 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx @@ -246,20 +246,25 @@ function NotificationButton({ function LeftSidebarToggleButton() { const dispatch = useDispatch(); + const hasMainMenu = useStore((state) => state.application.hasLeftSidebar); const mainMenuVisible = useStore( (state) => state.application.leftSidebarVisible, ); - return ( - { - dispatch(toggleLeftSidebarVisible()); - }} - /> - ); + if (hasMainMenu) { + return ( + { + dispatch(toggleLeftSidebarVisible()); + }} + /> + ); + } + + return null; } function RightSidebarToggleButton() { diff --git a/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx b/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx index 1d8a11589..6b571efc5 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx @@ -24,7 +24,10 @@ import {Navbar} from './Navbar'; import {useStore, useDispatch} from '../utils/useStore'; import {FlipperDevTools} from '../chrome/FlipperDevTools'; import {setStaticView} from '../reducers/connections'; -import {toggleLeftSidebarVisible} from '../reducers/application'; +import { + toggleHasLeftSidebar, + toggleLeftSidebarVisible, +} from '../reducers/application'; import {AppInspect} from './appinspect/AppInspect'; import PluginContainer from '../PluginContainer'; import {ContentContainer} from './ContentContainer'; @@ -79,6 +82,8 @@ export function SandyApp() { // toggle sidebar visibility if needed const hasLeftSidebar = newSelection === 'appinspect' || newSelection === 'notification'; + + dispatch(toggleHasLeftSidebar(hasLeftSidebar)); if (hasLeftSidebar) { if (newSelection === toplevelSelection) { dispatch(toggleLeftSidebarVisible());