Skip to content

Commit 16292de

Browse files
zenoachtigzenoachtig
authored
Display sidebar on no-TOC pages (#2942)
1 parent 9108c56 commit 16292de

File tree

18 files changed

+162
-79
lines changed

18 files changed

+162
-79
lines changed

‎.changeset/eleven-pants-work.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+
Display sidebar on no-TOC pages

‎packages/gitbook/src/components/DocumentView/OpenAPI/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
}
123123

124124
.openapi-column-preview-body {
125-
@apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
125+
@apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:page-has-toc:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
126126
}
127127

128128
.openapi-column-preview pre {

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,11 @@ export function Dropdown<E extends HTMLElement>(props: {
3838
aria-orientation="vertical"
3939
aria-labelledby={dropdownId}
4040
className={tcls(
41-
'w-52',
4241
'max-h-80',
4342
'flex',
4443
'absolute',
4544
'top-full',
4645
'left-0',
47-
'z-20',
4846
'origin-top-left',
4947
'invisible',
5048
'transition-opacity',
@@ -54,22 +52,24 @@ export function Dropdown<E extends HTMLElement>(props: {
5452
className
5553
)}
5654
>
57-
<div
58-
className={tcls(
59-
'mt-2',
60-
'w-full',
61-
'bg-tint-base',
62-
'rounded-lg',
63-
'straight-corners:rounded-sm',
64-
'p-2',
65-
'shadow-1xs',
66-
'overflow-auto',
67-
'ring-1',
68-
'ring-tint-subtle',
69-
'focus:outline-none'
70-
)}
71-
>
72-
{children}
55+
<div className="fixed z-50 w-52">
56+
<div
57+
className={tcls(
58+
'mt-2',
59+
'w-full',
60+
'bg-tint-base',
61+
'rounded-lg',
62+
'straight-corners:rounded-sm',
63+
'p-2',
64+
'shadow-1xs',
65+
'overflow-auto',
66+
'ring-1',
67+
'ring-tint-subtle',
68+
'focus:outline-none'
69+
)}
70+
>
71+
{children}
72+
</div>
7373
</div>
7474
</div>
7575
</div>

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

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { SpacesDropdown } from './SpacesDropdown';
2020
export function Header(props: { context: GitBookSiteContext; withTopHeader?: boolean }) {
2121
const { context, withTopHeader } = props;
2222
const { siteSpace, siteSpaces, sections, customization } = context;
23-
const isMultiVariants = siteSpaces.length > 1;
2423

2524
return (
2625
<header
@@ -31,7 +30,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
3130
`h-[${HEADER_HEIGHT_DESKTOP}px]`,
3231
'sticky',
3332
'top-0',
34-
'z-10',
33+
'z-30',
3534
'w-full',
3635
'flex-none',
3736
'shadow-[0px_1px_0px]',
@@ -68,14 +67,12 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
6867
'py-3',
6968
'min-h-16',
7069
'sm:h-16',
71-
isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap',
7270
CONTAINER_STYLE
7371
)}
7472
>
7573
<div
7674
className={tcls(
7775
'flex max-w-full',
78-
isMultiVariants && 'page-no-toc:max-[400px]:w-full',
7976
'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
8077
)}
8178
>
@@ -86,25 +83,13 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
8683
'text-tint-strong',
8784
'theme-bold:text-header-link',
8885
'hover:bg-tint-hover',
89-
'theme-bold:hover:bg-header-link/3'
86+
'theme-bold:hover:bg-header-link/3',
87+
'page-no-toc:hidden'
9088
)}
9189
/>
9290
<HeaderLogo context={context} />
9391
</div>
9492

95-
{isMultiVariants && (
96-
<div className="mr-auto page-no-toc:flex hidden">
97-
<SpacesDropdown
98-
context={context}
99-
siteSpace={siteSpace}
100-
siteSpaces={siteSpaces}
101-
className={
102-
'theme-bold:bg-header-link/2 theme-bold:text-header-link theme-bold:ring-header-link/4 theme-bold:group-focus-within/dropdown:bg-header-link/3 theme-bold:group-focus-within/dropdown:text-header-link theme-bold:group-focus-within/dropdown:ring-header-link/6 theme-bold:group-hover/dropdown:bg-header-link/3 theme-bold:group-hover/dropdown:text-header-link theme-bold:group-hover/dropdown:ring-header-link/6 theme-bold:contrast-more:bg-header-background theme-bold:contrast-more:text-header-link theme-bold:contrast-more:ring-header-link theme-bold:contrast-more:group-hover/dropdown:text-header-link theme-bold:contrast-more:group-hover/dropdown:ring-header-link theme-bold:contrast-more:group-focus-within/dropdown:text-header-link theme-bold:contrast-more:group-focus-within/dropdown:ring-header-link theme-bold:dark:bg-header-link/2 theme-bold:dark:text-header-link theme-bold:dark:ring-header-link/4 theme-bold:dark:group-hover/dropdown:bg-header-link/3 theme-bold:dark:group-hover/dropdown:text-header-link theme-bold:dark:group-hover/dropdown:ring-header-link/6 theme-bold:contrast-more:dark:group-hover/dropdown:text-header-link theme-bold:contrast-more:dark:group-hover/dropdown:ring-header-link theme-bold:dark:group-focus-within/dropdown:bg-header-link/3 theme-bold:dark:group-focus-within/dropdown:text-header-link theme-bold:dark:group-focus-within/dropdown:ring-header-link/6 theme-bold:contrast-more:dark:group-focus-within/dropdown:text-header-link theme-bold:contrast-more:dark:group-focus-within/dropdown:ring-header-link'
103-
}
104-
/>
105-
</div>
106-
)}
107-
10893
{customization.header.links.length > 0 && (
10994
<HeaderLinks>
11095
{customization.header.links.map((link, index) => {
@@ -169,8 +154,48 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
169154
</div>
170155
</div>
171156
</div>
172-
{sections ? (
173-
<SiteSectionTabs sections={encodeClientSiteSections(context, sections)} />
157+
158+
{sections || siteSpaces.length > 1 ? (
159+
<div
160+
className={tcls(
161+
'w-full',
162+
'overflow-x-scroll',
163+
'overflow-y-hidden',
164+
'hide-scroll',
165+
'-mb-4 pb-4', // Positive padding / negative margin allows the navigation menu indicator to show in a scroll viewƒ
166+
!sections ? ['hidden', 'page-no-toc:flex'] : 'flex'
167+
)}
168+
>
169+
<div
170+
className={tcls(
171+
CONTAINER_STYLE,
172+
'page-default-width:max-w-[unset]',
173+
'grow',
174+
'flex',
175+
'items-end',
176+
'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
177+
)}
178+
>
179+
{siteSpaces.length > 1 && (
180+
<div
181+
id="variants"
182+
className="my-2 mr-5 page-no-toc:flex hidden grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
183+
>
184+
<SpacesDropdown
185+
context={context}
186+
siteSpace={siteSpace}
187+
siteSpaces={siteSpaces}
188+
className="w-full grow py-1"
189+
/>
190+
</div>
191+
)}
192+
{sections && (
193+
<SiteSectionTabs
194+
sections={encodeClientSiteSections(context, sections)}
195+
/>
196+
)}
197+
</div>
198+
</div>
174199
) : null}
175200
</header>
176201
);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export async function HeaderLogo(props: HeaderLogoProps) {
5555
'min-w-0',
5656
'max-w-40',
5757
'lg:max-w-64',
58+
'site-header-none:page-no-toc:lg:max-w-56',
5859
'max-h-10',
5960
'lg:max-h-12',
6061
'h-full',
@@ -84,7 +85,7 @@ function LogoFallback(props: HeaderLogoProps) {
8485
<div
8586
className={tcls(
8687
'text-pretty',
87-
'line-clamp-3',
88+
'line-clamp-2',
8889
'tracking-tight',
8990
'max-w-[18ch]',
9091
'lg:max-w-[24ch]',

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
5454
'px-2',
5555
'rounded',
5656
'straight-corners:rounded-sm',
57-
'page-no-toc:hidden',
5857
props.className
5958
)}
6059
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function SpacesDropdown(props: {
6363
className
6464
)}
6565
>
66-
<span className={tcls('line-clamp-2', 'grow')}>{siteSpace.title}</span>
66+
<span className={tcls('truncate', 'grow')}>{siteSpace.title}</span>
6767
<DropdownChevron />
6868
</div>
6969
)}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,11 @@ export function PageAside(props: {
4848
'group/aside',
4949
'hidden',
5050
'xl:flex',
51+
// 'page-no-toc:lg:flex',
5152
'flex-col',
5253
'basis-56',
54+
// 'page-no-toc:basis-40',
55+
// 'page-no-toc:xl:basis-56',
5356
'grow-0',
5457
'shrink-0',
5558
'break-anywhere', // To prevent long words in headings from breaking the layout

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ export function PageBody(props: {
4747
'page-api-block:xl:max-2xl:pr-0',
4848
// Max size to ensure one column in api is aligned with rest of content (2 x 3xl) + (gap-3 + 2) * px-12
4949
'page-api-block:max-w-[1654px]',
50-
'page-api-block:mx-auto',
50+
'page-api-block:mx-auto'
5151

52-
page.layout.tableOfContents ? null : 'xl:ml-56'
52+
// page.layout.tableOfContents ? null : 'xl:ml-56'
5353
) +
54-
(asFullWidth ? ' page-full-width' : '') +
55-
(!page.layout.tableOfContents ? ' page-no-toc' : '')
54+
(asFullWidth ? ' page-full-width' : ' page-default-width') +
55+
(!page.layout.tableOfContents ? ' page-no-toc' : ' page-has-toc')
5656
}
5757
>
5858
<PreservePageLayout asFullWidth={asFullWidth} />

‎packages/gitbook/src/components/PageBody/PageCover.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@ export async function PageCover(props: {
3232
'sm:-mx-6',
3333
'md:-mx-8',
3434
'-lg:mr-8',
35-
page.layout.tableOfContents ? 'lg:ml-0' : null,
35+
'lg:ml-0',
36+
!page.layout.tableOfContents &&
37+
context.customization.header.preset !== 'none'
38+
? 'lg:-ml-64'
39+
: null,
3640
]
3741
: ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8']
3842
)}

‎packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export async function CustomizationRootLayout(props: {
5555
lang={customization.internationalization.locale}
5656
className={tcls(
5757
customization.header.preset === CustomizationHeaderPreset.None
58-
? null
58+
? 'site-header-none'
5959
: 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling
6060
customization.styling.corners === CustomizationCorners.Straight
6161
? ' straight-corners'

‎packages/gitbook/src/components/Search/SearchModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export function SearchModal(props: SearchModalProps) {
8484
'bg-tint-12/4',
8585
'dark:bg-tint-1/6',
8686
'backdrop-blur-2xl',
87-
'z-30',
87+
'z-50',
8888
'px-4',
8989
'pt-4',
9090
'md:pt-[min(8vh,6rem)]'

‎packages/gitbook/src/components/SiteSections/SiteSectionList.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,13 @@ export function SiteSectionGroupItem(props: {
137137
return (
138138
<>
139139
<button
140+
type="button"
140141
onClick={(event) => {
141142
event.preventDefault();
142143
event.stopPropagation();
143144
setIsVisible((prev) => !prev);
144145
}}
145-
className={`group/section-link flex w-full flex-row items-center gap-3 rounded-md straight-corners:rounded-none px-3 py-2 transition-all hover:bg-tint-hover hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint ${
146+
className={`group/section-link flex w-full flex-row items-center gap-3 rounded-md straight-corners:rounded-none px-3 py-2 text-left transition-all hover:bg-tint-hover hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint ${
146147
isActiveGroup
147148
? 'font-semibold text-primary hover:bg-primary-hover hover:text-primary-strong contrast-more:text-primary-strong contrast-more:hover:ring-1 contrast-more:hover:ring-primary-hover'
148149
: null

0 commit comments

Comments
 (0)