gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-23 19:06:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Position the variant picker in the ToC (#2632)

Browse Source 
Co-authored-by: Zeno Kapitein <admin@zeno.zone>
Co-authored-by: Zeno Kapitein <zenomilan@me.com>
This commit is contained in:
Valentino Hudhra
2025-01-09 16:47:20 +01:00
committed by GitHub
parent 741dd490d4
commit 718a8a54b1
5 changed files with 89 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/gorgeous-horses-grow.md
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Position the variant picker in the ToC
packages/gitbook/src/components/Header/Dropdown.tsx
+3 -2
View File
@@ -91,8 +91,9 @@ export function DropdownChevron() {
'opacity-6',
'size-3',
'ms-1',
'transition-transform',
'group-hover/dropdown:rotate-180',
'transition-all',
'group-hover/dropdown:opacity-11',
'group-focus-within/dropdown:rotate-180',
)}
/>
);
packages/gitbook/src/components/Header/Header.tsx
+17 -25
View File
@@ -74,14 +74,23 @@ export function Header(props: {
'gap-4',
'lg:gap-8',
'flex',
'h-16',
'items-center',
'justify-between',
'w-full',
'py-3',
'min-h-16',
'sm:h-16',
isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap',
CONTAINER_STYLE,
)}
>
<div className="flex max-w-full shrink min-w-0 gap-2 lg:gap-4 justify-start items-center">
<div
className={tcls(
'flex max-w-full',
isMultiVariants && 'page-no-toc:max-[400px]:w-full',
'shrink min-w-0 gap-2 lg:gap-4 justify-start items-center',
)}
>
<HeaderMobileMenu
className={tcls(
'lg:hidden',
@@ -93,31 +102,14 @@ export function Header(props: {
)}
/>
<HeaderLogo site={site} space={space} customization={customization} />
{!hasSiteSections && isMultiVariants ? (
<div className="z-20 shrink hidden sm:block">
<SpacesDropdown
className={tcls(
!isCustomizationDefault &&
withTopHeader && [
'bg-header-link/2',
'dark:bg-header-link/2',
'text-header-link/8',
'dark:text-header-link/8',
'ring-1',
'ring-header-link/4',
'dark:ring-header-link/4',
'contrast-more:bg-header-background',
'contrast-more:text-header-link',
'contrast-more:ring-header-link',
],
)}
space={space}
spaces={spaces}
/>
</div>
) : null}
</div>
{isMultiVariants && (
<div className="hidden page-no-toc:flex mr-auto">
<SpacesDropdown space={space} spaces={spaces} />
</div>
)}
{customization.header.links.length > 0 && (
<HeaderLinks>
{customization.header.links.map((link, index) => {
packages/gitbook/src/components/Header/SpacesDropdown.tsx
+39 -10
View File
@@ -10,6 +10,10 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
return (
<Dropdown
className={tcls(
'group-hover/dropdown:invisible', // Prevent hover from opening the dropdown, as it's annoying in this context
'group-focus-within/dropdown:group-hover/dropdown:visible', // When the dropdown is already open, it should remain visible when hovered
)}
button={(buttonProps) => (
<div
{...buttonProps}
@@ -18,29 +22,54 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
'flex',
'flex-row',
'items-center',
'rounded-2xl',
'transition-all',
'hover:cursor-pointer',
'px-3',
'py-2',
'gap-2',
'rounded-md',
'straight-corners:rounded-none',
'hover:cursor-pointer',
'bg-dark/1',
'dark:bg-light/1',
'bg-light',
'group-hover/dropdown:bg-light-1',
'group-focus-within/dropdown:bg-light-1',
'dark:bg-dark-1',
'dark:group-hover/dropdown:bg-dark-3',
'dark:group-focus-within/dropdown:bg-dark-3',
'text-sm',
'text-dark-4',
'group-hover/dropdown:text-dark',
'group-focus-within/dropdown:text-dark',
'dark:text-light-4',
'dark:group-hover/dropdown:text-light',
'dark:group-focus-within/dropdown:text-light',
'ring-1',
'ring-dark/2',
'group-hover/dropdown:ring-dark/4',
'group-focus-within/dropdown:ring-dark/4',
'dark:ring-light/2',
'dark:group-hover/dropdown:ring-light/4',
'dark:group-focus-within/dropdown:ring-light/4',
'contrast-more:bg-light',
'contrast-more:ring-1',
'contrast-more:ring-dark',
'dark:contrast-more:ring-light',
'dark:contrast-more:bg-dark',
'contrast-more:ring-1',
'contrast-more:group-hover/dropdown:ring-2',
'contrast-more:ring-dark',
'contrast-more:group-hover/dropdown:ring-dark',
'contrast-more:group-focus-within/dropdown:ring-dark',
'dark:contrast-more:ring-light',
'dark:contrast-more:group-hover/dropdown:ring-light',
'dark:contrast-more:group-focus-within/dropdown:ring-light',
'px-3',
'py-1',
className,
)}
>
<span className="line-clamp-2">{space.title}</span>
<span className={tcls('line-clamp-2', 'grow')}>{space.title}</span>
<DropdownChevron />
</div>
)}
packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+25 -41
View File
@@ -135,47 +135,31 @@ export async function SpaceLayout(props: {
}
innerHeader={
// displays the search button and/or the space dropdown in the ToC according to the header/variant settings. E.g if there is no header, the search button will be displayed in the ToC.
withVariants || !withTopHeader ? (
<>
{!withTopHeader && (
<div
className={tcls(
'hidden',
'lg:block',
'flex-shrink-0',
'grow-0',
'md:grow',
'sm:max-w-xs',
'lg:max-w-full',
)}
>
<React.Suspense fallback={null}>
<SearchButton>
<span className={tcls('flex-1')}>
{t(
getSpaceLanguage(customization),
customization.aiSearch.enabled
? 'search_or_ask'
: 'search',
)}
</span>
</SearchButton>
</React.Suspense>
</div>
)}
{withVariants && (
<div
className={tcls(
withTopHeader && !sections
? 'sm:hidden'
: ['sm:hidden', 'lg:flex'],
)}
>
<SpacesDropdown space={space} spaces={spaces} />
</div>
)}
</>
) : null
<>
{!withTopHeader && (
<div className={tcls('hidden', 'lg:block')}>
<React.Suspense fallback={null}>
<SearchButton>
<span className={tcls('flex-1')}>
{t(
getSpaceLanguage(customization),
customization.aiSearch.enabled
? 'search_or_ask'
: 'search',
)}
</span>
</SearchButton>
</React.Suspense>
</div>
)}
{withVariants && (
<SpacesDropdown
space={space}
spaces={spaces}
className={tcls('w-full')}
/>
)}
</>
}
headerOffset={headerOffset}
/>