Move space selector to sidebar on mobile

Resolves #2365

Author: zenoachtig

packages/gitbook/src/components/Header/Header.tsx

@@ -88,7 +88,7 @@ export function Header(props: {
                         />
                         <HeaderLogo site={site} space={space} customization={customization} />
                         {!hasSiteSections && isMultiVariants ? (
-                            <div className="z-20 shrink">
+                            <div className="z-20 shrink hidden sm:block">
                                 <SpacesDropdown space={space} spaces={spaces} />
                             </div>
                         ) : null}

packages/gitbook/src/components/Header/HeaderLogo.tsx

@@ -102,6 +102,7 @@ function LogoFallback(props: HeaderLogoProps) {
                     'font-semibold',
                     'ms-3',
                     'text-base',
+                    'lg:text-lg',
                     'leading-tight',
                     customization.header.preset === CustomizationHeaderPreset.Default ||
                         customization.header.preset === CustomizationHeaderPreset.None

packages/gitbook/src/components/Header/SpacesDropdown.tsx

@@ -5,8 +5,8 @@ import { tcls } from '@/lib/tailwind';
 import { Dropdown, DropdownChevron, DropdownMenu } from './Dropdown';
 import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem';
 
-export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
-    const { space, spaces } = props;
+export function SpacesDropdown(props: { space: Space; spaces: Space[], className?: string}) {
+    const { space, spaces, className } = props;
 
     return (
         <Dropdown
@@ -36,6 +36,7 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
                         'contrast-more:dark:border-light',
                         'contrast-more:dark:bg-dark',
                         'contrast-more:dark:text-light',
+                        className
                     )}
                 >
                     <span className={tcls('line-clamp-2')}>{space.title}</span>

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -106,9 +106,7 @@ export function SpaceLayout(props: {
                             )
                         }
                         innerHeader={
-                            (sections || !withTopHeader) && withVariants ? (
-                                <SpacesDropdown space={space} spaces={spaces} />
-                            ) : null
+                            withVariants && <SpacesDropdown className={(!sections || withTopHeader) ? 'sm:hidden' : undefined} space={space} spaces={spaces} />
                         }
                         headerOffset={headerOffset}
                     />