diff --git a/.changeset/real-clocks-grin.md b/.changeset/real-clocks-grin.md
new file mode 100644
index 000000000..e3f506612
--- /dev/null
+++ b/.changeset/real-clocks-grin.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Move variant selector to sidebar & support translations
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 48e45d17b..048700a71 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/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: {
- {sections || siteSpaces.length > 1 ? (
+ {sections || withVariants ? (
- {siteSpaces.length > 1 && (
+ {withVariants && (
- {isMultiVariants && !showAsk ? (
+ {withVariants && !showAsk ? (
) : null}
{state !== null && !showAsk ? (
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index 55e236d23..fb9f947eb 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/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: {
1}
+ withVariants={Boolean(withVariants)}
spaceTitle={siteSpace.title}
siteSpaceId={siteSpace.id}
/>
@@ -96,7 +106,12 @@ export function SpaceLayout(props: {
visitorCookieTrackingEnabled={customization.insights?.trackingCookie}
>
-
+
{aiMode === CustomizationAIMode.Assistant ? (
) : null}
@@ -147,7 +162,7 @@ export function SpaceLayout(props: {
)}
/>
)}
- {isMultiVariants && !sections && (
+ {withVariants === 'generic' && (