Sidebar intelligent responsive show/hide it when crosses the breakpoi…

…nt (Automattic#536)

* Keep window size and just add or subscract sidebar width

* Show hide sidebar when widnow crosses the breakpoint

src/components/app.tsx

@@ -2,12 +2,11 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { useState } from 'react';
 import { useLocalizationSupport } from '../hooks/use-localization-support';
 import { useOnboarding } from '../hooks/use-onboarding';
+import { useSidebarVisibility } from '../hooks/use-sidebar-visibility';
 import { isWindows } from '../lib/app-globals';
 import { cx } from '../lib/cx';
-import { getIpcApi } from '../lib/get-ipc-api';
 import MainSidebar from './main-sidebar';
 import Onboarding from './onboarding';
 import { SiteContentTabs } from './site-content-tabs';
@@ -18,11 +17,7 @@ import WindowsTitlebar from './windows-titlebar';
 export default function App() {
 	useLocalizationSupport();
 	const { needsOnboarding } = useOnboarding();
-	const [ isSidebarVisible, setIsSidebarVisible ] = useState( true );
-	const toggleSidebar = () => {
-		getIpcApi().toggleMinWindowWidth( isSidebarVisible );
-		setIsSidebarVisible( ! isSidebarVisible );
-	};
+	const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
 
 	return (
 		<>

src/constants.ts

@@ -1,6 +1,7 @@
-export const MAIN_MIN_WIDTH = 900;
+export const DEFAULT_WIDTH = 900;
 export const MAIN_MIN_HEIGHT = 600;
 export const SIDEBAR_WIDTH = 268;
+export const MAIN_MIN_WIDTH = DEFAULT_WIDTH - SIDEBAR_WIDTH + 20;
 export const SCREENSHOT_WIDTH = 1040;
 export const SCREENSHOT_HEIGHT = 1248;
 export const LIMIT_OF_ZIP_SITES_PER_USER = 5;

src/hooks/use-sidebar-visibility.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect, useCallback } from 'react';
+import { DEFAULT_WIDTH } from '../constants';
+import { getIpcApi } from '../lib/get-ipc-api';
+
+const SIDEBAR_BREAKPOINT = DEFAULT_WIDTH;
+
+export function useSidebarVisibility() {
+	const [ isSidebarVisible, setIsSidebarVisible ] = useState( true );
+	const [ isLowerThanBreakpoint, setIsLowerThanBreakpoint ] = useState( false );
+
+	useEffect( () => {
+		const handleResize = () => {
+			setIsLowerThanBreakpoint( window.innerWidth < SIDEBAR_BREAKPOINT );
+		};
+		window.addEventListener( 'resize', handleResize );
+		return () => {
+			window.removeEventListener( 'resize', handleResize );
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( isLowerThanBreakpoint ) {
+			setIsSidebarVisible( false );
+		} else {
+			setIsSidebarVisible( true );
+		}
+	}, [ isLowerThanBreakpoint ] );
+
+	const toggleSidebar = useCallback( () => {
+		getIpcApi().toggleMinWindowWidth( isSidebarVisible );
+		setIsSidebarVisible( ! isSidebarVisible );
+	}, [ isSidebarVisible ] );
+
+	return { isSidebarVisible, toggleSidebar };
+}

src/ipc-handlers.ts

@@ -16,7 +16,7 @@ import * as Sentry from '@sentry/electron/main';
 import { LocaleData, defaultI18n } from '@wordpress/i18n';
 import archiver from 'archiver';
 import { DEFAULT_PHP_VERSION } from '../vendor/wp-now/src/constants';
-import { MAIN_MIN_HEIGHT, MAIN_MIN_WIDTH, SIDEBAR_WIDTH, SIZE_LIMIT_BYTES } from './constants';
+import { MAIN_MIN_WIDTH, SIDEBAR_WIDTH, SIZE_LIMIT_BYTES } from './constants';
 import { isEmptyDir, pathExists, isWordPressDirectory, sanitizeFolderName } from './lib/fs-utils';
 import { getImageData } from './lib/get-image-data';
 import { exportBackup } from './lib/import-export/export/export-manager';
@@ -727,24 +727,15 @@ export function resetDefaultLocaleData( _event: IpcMainInvokeEvent ) {
 	defaultI18n.resetLocaleData();
 }
 
-const previousWidths = {
-	sidebar: MAIN_MIN_WIDTH,
-	noSidebar: MAIN_MIN_WIDTH - SIDEBAR_WIDTH,
-};
 export function toggleMinWindowWidth( event: IpcMainInvokeEvent, isSidebarVisible: boolean ) {
 	const parentWindow = BrowserWindow.fromWebContents( event.sender );
 	if ( ! parentWindow || parentWindow.isDestroyed() || event.sender.isDestroyed() ) {
 		return;
 	}
 	const [ currentWidth, currentHeight ] = parentWindow.getSize();
-	if ( isSidebarVisible ) {
-		previousWidths.sidebar = currentWidth;
-	} else {
-		previousWidths.noSidebar = currentWidth;
-	}
-	const padding = 20;
-	const newMinWidth = isSidebarVisible ? MAIN_MIN_WIDTH - SIDEBAR_WIDTH + padding : MAIN_MIN_WIDTH;
-	const newWidth = isSidebarVisible ? previousWidths.noSidebar : previousWidths.sidebar;
-	parentWindow.setMinimumSize( newMinWidth, MAIN_MIN_HEIGHT );
+	const newWidth = Math.max(
+		MAIN_MIN_WIDTH,
+		isSidebarVisible ? currentWidth - SIDEBAR_WIDTH : currentWidth + SIDEBAR_WIDTH
+	);
 	parentWindow.setSize( newWidth, currentHeight, true );
 }

src/main-window.ts

@@ -1,6 +1,11 @@
 import { BrowserWindow, type BrowserWindowConstructorOptions } from 'electron';
 import { moveDatabasesInSitu } from '../vendor/wp-now/src';
-import { MAIN_MIN_HEIGHT, MAIN_MIN_WIDTH, WINDOWS_TITLEBAR_HEIGHT } from './constants';
+import {
+	DEFAULT_WIDTH,
+	MAIN_MIN_HEIGHT,
+	MAIN_MIN_WIDTH,
+	WINDOWS_TITLEBAR_HEIGHT,
+} from './constants';
 import { isEmptyDir } from './lib/fs-utils';
 import { portFinder } from './lib/port-finder';
 import { keepSqliteIntegrationUpdated } from './lib/sqlite-versions';
@@ -52,7 +57,7 @@ export function createMainWindow(): BrowserWindow {
 
 	mainWindow = new BrowserWindow( {
 		height: MAIN_MIN_HEIGHT,
-		width: MAIN_MIN_WIDTH,
+		width: DEFAULT_WIDTH,
 		backgroundColor: 'rgba(30, 30, 30, 1)',
 		minHeight: MAIN_MIN_HEIGHT,
 		minWidth: MAIN_MIN_WIDTH,