Studio: fix setting menu not open if no sites (#340)

* Studio: fix setting menu not open if no sites

* Update: Fix bug based on comments

Author: kozer

src/components/app.tsx

@@ -9,43 +9,45 @@ import { cx } from '../lib/cx';
 import MainSidebar from './main-sidebar';
 import Onboarding from './onboarding';
 import { SiteContentTabs } from './site-content-tabs';
+import UserSettings from './user-settings';
 import WindowsTitlebar from './windows-titlebar';
 
 export default function App() {
 	useLocalizationSupport();
 	const { needsOnboarding } = useOnboarding();
 
-	if ( needsOnboarding ) {
-		return (
-			<VStack
-				className={ cx( 'h-screen backdrop-blur-3xl app-drag-region select-none' ) }
-				spacing="0"
-			>
-				{ isWindows() && <WindowsTitlebar className="h-titlebar-win flex-shrink-0" /> }
-				<Onboarding />
-			</VStack>
-		);
-	}
-
 	return (
-		<VStack
-			className={ cx(
-				'h-screen bg-chrome backdrop-blur-3xl ltr:pr-chrome rtl:pl-chrome app-drag-region select-none',
-				isWindows() && 'pt-0 pb-chrome',
-				! isWindows() && 'py-chrome'
-			) }
-			spacing="0"
-		>
-			{ isWindows() && <WindowsTitlebar className="h-titlebar-win flex-shrink-0" /> }
-			<HStack spacing="0" alignment="left" className="flex-grow">
-				<MainSidebar className="basis-52 flex-shrink-0 h-full" />
-				<main
-					data-testid="site-content"
-					className="bg-white h-full flex-grow rounded-chrome overflow-hidden"
+		<>
+			{ needsOnboarding ? (
+				<VStack
+					className={ cx( 'h-screen backdrop-blur-3xl app-drag-region select-none' ) }
+					spacing="0"
 				>
-					<SiteContentTabs />
-				</main>
-			</HStack>
-		</VStack>
+					{ isWindows() && <WindowsTitlebar className="h-titlebar-win flex-shrink-0" /> }
+					<Onboarding />
+				</VStack>
+			) : (
+				<VStack
+					className={ cx(
+						'h-screen bg-chrome backdrop-blur-3xl ltr:pr-chrome rtl:pl-chrome app-drag-region select-none',
+						isWindows() && 'pt-0 pb-chrome',
+						! isWindows() && 'py-chrome'
+					) }
+					spacing="0"
+				>
+					{ isWindows() && <WindowsTitlebar className="h-titlebar-win flex-shrink-0" /> }
+					<HStack spacing="0" alignment="left" className="flex-grow">
+						<MainSidebar className="basis-52 flex-shrink-0 h-full" />
+						<main
+							data-testid="site-content"
+							className="bg-white h-full flex-grow rounded-chrome overflow-hidden"
+						>
+							<SiteContentTabs />
+						</main>
+					</HStack>
+				</VStack>
+			) }
+			<UserSettings />
+		</>
 	);
 }

src/components/main-sidebar.tsx

@@ -13,7 +13,6 @@ import offlineIcon from './offline-icon';
 import { RunningSites } from './running-sites';
 import SiteMenu from './site-menu';
 import Tooltip from './tooltip';
-import UserSettings from './user-settings';
 import { WordPressLogo } from './wordpress-logo';
 
 interface MainSidebarProps {
@@ -143,7 +142,6 @@ export default function MainSidebar( { className }: MainSidebarProps ) {
 						<div className="mb-[6px]">
 							<SidebarAuthFooter />
 						</div>
-						<UserSettings />
 					</div>
 				</div>
 			</div>