Skip to content

Commit 718a8a5

Browse files
valentin0hzenoachtig
valentin0h
and
zenoachtig
authored
Position the variant picker in the ToC (#2632)
Co-authored-by: Zeno Kapitein <[email protected]> Co-authored-by: Zeno Kapitein <[email protected]>
1 parent 741dd49 commit 718a8a5

File tree

5 files changed

+87
-76
lines changed

5 files changed

+87
-76
lines changed

‎.changeset/gorgeous-horses-grow.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'gitbook': patch
3+
---
4+
5+
Position the variant picker in the ToC

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,9 @@ export function DropdownChevron() {
9191
'opacity-6',
9292
'size-3',
9393
'ms-1',
94-
'transition-transform',
95-
'group-hover/dropdown:rotate-180',
94+
'transition-all',
95+
'group-hover/dropdown:opacity-11',
96+
'group-focus-within/dropdown:rotate-180',
9697
)}
9798
/>
9899
);

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

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,23 @@ export function Header(props: {
7474
'gap-4',
7575
'lg:gap-8',
7676
'flex',
77-
'h-16',
7877
'items-center',
7978
'justify-between',
8079
'w-full',
80+
'py-3',
81+
'min-h-16',
82+
'sm:h-16',
83+
isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap',
8184
CONTAINER_STYLE,
8285
)}
8386
>
84-
<div className="flex max-w-full shrink min-w-0 gap-2 lg:gap-4 justify-start items-center">
87+
<div
88+
className={tcls(
89+
'flex max-w-full',
90+
isMultiVariants && 'page-no-toc:max-[400px]:w-full',
91+
'shrink min-w-0 gap-2 lg:gap-4 justify-start items-center',
92+
)}
93+
>
8594
<HeaderMobileMenu
8695
className={tcls(
8796
'lg:hidden',
@@ -93,31 +102,14 @@ export function Header(props: {
93102
)}
94103
/>
95104
<HeaderLogo site={site} space={space} customization={customization} />
96-
{!hasSiteSections && isMultiVariants ? (
97-
<div className="z-20 shrink hidden sm:block">
98-
<SpacesDropdown
99-
className={tcls(
100-
!isCustomizationDefault &&
101-
withTopHeader && [
102-
'bg-header-link/2',
103-
'dark:bg-header-link/2',
104-
'text-header-link/8',
105-
'dark:text-header-link/8',
106-
'ring-1',
107-
'ring-header-link/4',
108-
'dark:ring-header-link/4',
109-
'contrast-more:bg-header-background',
110-
'contrast-more:text-header-link',
111-
'contrast-more:ring-header-link',
112-
],
113-
)}
114-
space={space}
115-
spaces={spaces}
116-
/>
117-
</div>
118-
) : null}
119105
</div>
120106

107+
{isMultiVariants && (
108+
<div className="hidden page-no-toc:flex mr-auto">
109+
<SpacesDropdown space={space} spaces={spaces} />
110+
</div>
111+
)}
112+
121113
{customization.header.links.length > 0 && (
122114
<HeaderLinks>
123115
{customization.header.links.map((link, index) => {

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

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
1010

1111
return (
1212
<Dropdown
13+
className={tcls(
14+
'group-hover/dropdown:invisible', // Prevent hover from opening the dropdown, as it's annoying in this context
15+
'group-focus-within/dropdown:group-hover/dropdown:visible', // When the dropdown is already open, it should remain visible when hovered
16+
)}
1317
button={(buttonProps) => (
1418
<div
1519
{...buttonProps}
@@ -18,29 +22,54 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
1822
'flex',
1923
'flex-row',
2024
'items-center',
21-
'rounded-2xl',
25+
'transition-all',
26+
'hover:cursor-pointer',
27+
28+
'px-3',
29+
'py-2',
30+
'gap-2',
31+
32+
'rounded-md',
2233
'straight-corners:rounded-none',
2334

24-
'hover:cursor-pointer',
25-
'bg-dark/1',
26-
'dark:bg-light/1',
35+
'bg-light',
36+
'group-hover/dropdown:bg-light-1',
37+
'group-focus-within/dropdown:bg-light-1',
38+
'dark:bg-dark-1',
39+
'dark:group-hover/dropdown:bg-dark-3',
40+
'dark:group-focus-within/dropdown:bg-dark-3',
2741

2842
'text-sm',
2943
'text-dark-4',
44+
'group-hover/dropdown:text-dark',
45+
'group-focus-within/dropdown:text-dark',
3046
'dark:text-light-4',
47+
'dark:group-hover/dropdown:text-light',
48+
'dark:group-focus-within/dropdown:text-light',
49+
50+
'ring-1',
51+
'ring-dark/2',
52+
'group-hover/dropdown:ring-dark/4',
53+
'group-focus-within/dropdown:ring-dark/4',
54+
'dark:ring-light/2',
55+
'dark:group-hover/dropdown:ring-light/4',
56+
'dark:group-focus-within/dropdown:ring-light/4',
3157

3258
'contrast-more:bg-light',
59+
'dark:contrast-more:bg-dark',
3360
'contrast-more:ring-1',
61+
'contrast-more:group-hover/dropdown:ring-2',
3462
'contrast-more:ring-dark',
63+
'contrast-more:group-hover/dropdown:ring-dark',
64+
'contrast-more:group-focus-within/dropdown:ring-dark',
3565
'dark:contrast-more:ring-light',
36-
'dark:contrast-more:bg-dark',
66+
'dark:contrast-more:group-hover/dropdown:ring-light',
67+
'dark:contrast-more:group-focus-within/dropdown:ring-light',
3768

38-
'px-3',
39-
'py-1',
4069
className,
4170
)}
4271
>
43-
<span className="line-clamp-2">{space.title}</span>
72+
<span className={tcls('line-clamp-2', 'grow')}>{space.title}</span>
4473
<DropdownChevron />
4574
</div>
4675
)}

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

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -135,47 +135,31 @@ export async function SpaceLayout(props: {
135135
}
136136
innerHeader={
137137
// 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.
138-
withVariants || !withTopHeader ? (
139-
<>
140-
{!withTopHeader && (
141-
<div
142-
className={tcls(
143-
'hidden',
144-
'lg:block',
145-
'flex-shrink-0',
146-
'grow-0',
147-
'md:grow',
148-
'sm:max-w-xs',
149-
'lg:max-w-full',
150-
)}
151-
>
152-
<React.Suspense fallback={null}>
153-
<SearchButton>
154-
<span className={tcls('flex-1')}>
155-
{t(
156-
getSpaceLanguage(customization),
157-
customization.aiSearch.enabled
158-
? 'search_or_ask'
159-
: 'search',
160-
)}
161-
</span>
162-
</SearchButton>
163-
</React.Suspense>
164-
</div>
165-
)}
166-
{withVariants && (
167-
<div
168-
className={tcls(
169-
withTopHeader && !sections
170-
? 'sm:hidden'
171-
: ['sm:hidden', 'lg:flex'],
172-
)}
173-
>
174-
<SpacesDropdown space={space} spaces={spaces} />
175-
</div>
176-
)}
177-
</>
178-
) : null
138+
<>
139+
{!withTopHeader && (
140+
<div className={tcls('hidden', 'lg:block')}>
141+
<React.Suspense fallback={null}>
142+
<SearchButton>
143+
<span className={tcls('flex-1')}>
144+
{t(
145+
getSpaceLanguage(customization),
146+
customization.aiSearch.enabled
147+
? 'search_or_ask'
148+
: 'search',
149+
)}
150+
</span>
151+
</SearchButton>
152+
</React.Suspense>
153+
</div>
154+
)}
155+
{withVariants && (
156+
<SpacesDropdown
157+
space={space}
158+
spaces={spaces}
159+
className={tcls('w-full')}
160+
/>
161+
)}
162+
</>
179163
}
180164
headerOffset={headerOffset}
181165
/>

0 commit comments

Comments
 (0)