Move variant selector to sidebar & support translations

.changeset/real-clocks-grin.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Move variant selector to sidebar & support translations

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

@@ -17,9 +17,10 @@ import { SpacesDropdown } from './SpacesDropdown';
 export function Header(props: {
     context: GitBookSiteContext;
     withTopHeader?: boolean;
+    withVariants?: 'generic' | 'translations';
     search?: React.ReactNode;
 }) {
-    const { context, withTopHeader, search } = props;
+    const { context, withTopHeader, withVariants, search } = props;
     const { siteSpace, siteSpaces, sections, customization } = context;
 
     return (
@@ -143,7 +144,7 @@ export function Header(props: {
                 </div>
             </div>
 
-            {sections || siteSpaces.length > 1 ? (
+            {sections || withVariants ? (
                 <div className="scroll-nojump">
                     <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
                         <div
@@ -164,10 +165,15 @@ export function Header(props: {
                                     'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
                                 )}
                             >
-                                {siteSpaces.length > 1 && (
+                                {withVariants && (
                                     <div
                                         id="variants"
-                                        className="my-2 mr-5 grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
+                                        className={tcls(
+                                            'my-2 mr-5 grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64',
+                                            withVariants === 'translations'
+                                                ? ''
+                                                : 'page-no-toc:flex hidden'
+                                        )}
                                     >
                                         <SpacesDropdown
                                             context={context}

packages/gitbook/src/components/Search/SearchContainer.tsx

@@ -18,7 +18,7 @@ import { useSearch } from './useSearch';
 interface SearchContainerProps {
     siteSpaceId: string;
     spaceTitle: string;
-    isMultiVariants: boolean;
+    withVariants: boolean;
     aiMode: CustomizationAIMode;
     className?: string;
 }
@@ -27,7 +27,7 @@ interface SearchContainerProps {
  * Client component to render the search input and results.
  */
 export function SearchContainer(props: SearchContainerProps) {
-    const { siteSpaceId, spaceTitle, isMultiVariants, aiMode, className } = props;
+    const { siteSpaceId, spaceTitle, withVariants, aiMode, className } = props;
 
     const withAIChat = aiMode === CustomizationAIMode.Assistant;
     const [state, setSearchState] = useSearch(withAIChat);
@@ -142,7 +142,7 @@ export function SearchContainer(props: SearchContainerProps) {
                     // Only show content if there's a query or Ask is enabled
                     (state?.query || aiMode !== CustomizationAIMode.None) && open ? (
                         <React.Suspense fallback={null}>
-                            {isMultiVariants && !showAsk ? (
+                            {withVariants && !showAsk ? (
                                 <SearchScopeToggle spaceTitle={spaceTitle} />
                             ) : null}
                             {state !== null && !showAsk ? (

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

@@ -44,8 +44,18 @@ export function SpaceLayout(props: {
 
     const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
 
+    const currentLanguage =
+        siteSpace.space.language ?? context.customization.internationalization.locale;
+
     const withSections = Boolean(sections && sections.list.length > 1);
-    const isMultiVariants = Boolean(siteSpaces.length > 1);
+    const withVariants: 'generic' | 'translations' | undefined =
+        siteSpaces.length > 1
+            ? siteSpaces.some(
+                  (space) => space.space.language && space.space.language !== currentLanguage
+              )
+                ? 'translations'
+                : 'generic'
+            : undefined;
 
     const withFooter =
         customization.themes.toggeable ||
@@ -60,7 +70,7 @@ export function SpaceLayout(props: {
             <React.Suspense fallback={null}>
                 <SearchContainer
                     aiMode={aiMode}
-                    isMultiVariants={siteSpaces.length > 1}
+                    withVariants={Boolean(withVariants)}
                     spaceTitle={siteSpace.title}
                     siteSpaceId={siteSpace.id}
                 />
@@ -96,7 +106,12 @@ export function SpaceLayout(props: {
                     visitorCookieTrackingEnabled={customization.insights?.trackingCookie}
                 >
                     <Announcement context={context} />
-                    <Header withTopHeader={withTopHeader} context={context} search={searchAndAI} />
+                    <Header
+                        withVariants={withVariants}
+                        withTopHeader={withTopHeader}
+                        context={context}
+                        search={searchAndAI}
+                    />
                     {aiMode === CustomizationAIMode.Assistant ? (
                         <AIChat trademark={customization.trademark.enabled} />
                     ) : null}
@@ -147,7 +162,7 @@ export function SpaceLayout(props: {
                                                     )}
                                                 />
                                             )}
-                                            {isMultiVariants && !sections && (
+                                            {withVariants === 'generic' && (
                                                 <SpacesDropdown
                                                     context={context}
                                                     siteSpace={siteSpace}