Skip to content

Commit e90c96f

Browse files
zenoachtigclairechabas
zenoachtig
and
clairechabas
authored
Page outline positioning (#2805)
Co-authored-by: Claire Chabas <claire.chabas@gmail.com>
1 parent d935fb1 commit e90c96f

File tree

6 files changed

+369
-316
lines changed

6 files changed

+369
-316
lines changed

‎.changeset/angry-years-notice.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+
page outline on the right remains visible when scrolling, move mode toggler to PageAside

‎packages/gitbook/src/app/middleware/(site)/(content)/[[...pathname]]/page.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -86,20 +86,18 @@ export default async function Page(props: {
8686
<PageCover as="full" page={page} cover={page.cover} context={contentRefContext} />
8787
) : null}
8888
{/* We use a flex row reverse to render the aside first because the page is streamed. */}
89-
<div className="flex flex-row-reverse justify-end">
90-
{page.layout.outline ? (
91-
<PageAside
92-
space={space}
93-
site={site}
94-
customization={customization}
95-
page={page}
96-
document={document}
97-
withHeaderOffset={headerOffset}
98-
withFullPageCover={withFullPageCover}
99-
withPageFeedback={withPageFeedback}
100-
context={contentRefContext}
101-
/>
102-
) : null}
89+
<div className="flex flex-row-reverse justify-end grow">
90+
<PageAside
91+
space={space}
92+
site={site}
93+
customization={customization}
94+
page={page}
95+
document={document}
96+
withHeaderOffset={headerOffset}
97+
withFullPageCover={withFullPageCover}
98+
withPageFeedback={withPageFeedback}
99+
context={contentRefContext}
100+
/>
103101
<PageBody
104102
space={space}
105103
pointer={contentPointer}

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

Lines changed: 114 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -20,115 +20,128 @@ export function Footer(props: {
2020
const { context, customization } = props;
2121

2222
return (
23-
<footer className="border-t border-tint-subtle scroll-nojump">
24-
<div
25-
className={tcls(
26-
CONTAINER_STYLE,
27-
'py-8',
28-
'gap-12',
29-
'flex',
30-
'flex-wrap',
31-
'items-start',
32-
)}
33-
>
34-
{/* Footer Logo */}
35-
<div className="shrink sm:basis-72 page-no-toc:lg:basis-56 mr-auto order-1 empty:hidden empty:lg:block page-no-toc:empty:lg:hidden page-no-toc:empty:xl:block">
36-
{customization.footer.logo ? (
37-
<Image
38-
alt="Logo"
39-
sources={{
40-
light: {
41-
src: customization.footer.logo.light,
42-
},
43-
dark: customization.footer.logo.dark
44-
? {
45-
src: customization.footer.logo.dark,
46-
}
47-
: null,
48-
}}
49-
priority="lazy"
50-
style={[
51-
'w-auto',
52-
'max-w-40',
53-
'lg:max-w-64',
54-
'max-h-12',
55-
'object-contain',
56-
'object-left',
57-
'rounded',
58-
'straight-corners:rounded-sm',
59-
]}
60-
sizes={[
61-
{
62-
width: 320,
63-
},
64-
]}
65-
/>
66-
) : null}
67-
</div>
68-
69-
{/* Mode Switcher */}
70-
<div
23+
<>
24+
<hr className="border-t border-tint-subtle" />
25+
<div className="scroll-nojump">
26+
<footer
7127
className={tcls(
72-
'ml-auto',
73-
'order-2 lg:order-4',
74-
customization.footer.groups?.length < 3 &&
75-
customization.footer.logo == undefined &&
76-
'sm:order-4',
77-
'xl:basis-56',
28+
CONTAINER_STYLE,
29+
'px-4',
30+
'mx-auto',
31+
'flex',
32+
'gap-12',
33+
// If the footer only contains a mode toggle, we only show it on smaller screens
34+
customization.themes.toggeable &&
35+
!customization.footer.copyright &&
36+
!customization.footer.logo &&
37+
customization.footer.groups?.length == 0
38+
? 'xl:hidden'
39+
: null,
7840
)}
7941
>
80-
{customization.themes.toggeable ? (
81-
<div className="flex items-center justify-end">
82-
<React.Suspense fallback={null}>
83-
<ThemeToggler />
84-
</React.Suspense>
85-
</div>
86-
) : null}
87-
</div>
88-
89-
{/* Navigation Groups (split into equal columns) */}
90-
{customization.footer.groups?.length > 0 ? (
42+
<div className="hidden lg:block basis-72 page-no-toc:hidden" />
9143
<div
9244
className={tcls(
93-
'flex flex-col sm:flex-row mx-auto grow lg:max-w-3xl gap-10 sm:gap-6 order-3',
94-
'w-full lg:w-auto',
95-
customization.footer.groups?.length < 3 &&
96-
customization.footer.logo == undefined &&
97-
'sm:w-auto',
45+
'py-8',
46+
'gap-12',
47+
'flex',
48+
'flex-wrap',
49+
'items-start',
50+
'w-full',
51+
'flex-1',
52+
'max-w-3xl',
53+
'page-full-width:max-w-none',
54+
'mx-auto',
9855
)}
9956
>
100-
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
101-
(column, columnIndex) => (
102-
<div key={columnIndex} className="flex w-full flex-col gap-10">
103-
{column.map((group, groupIndex) => (
104-
<FooterLinksGroup
105-
key={groupIndex}
106-
group={group}
107-
context={context}
108-
/>
109-
))}
110-
</div>
111-
),
112-
)}
113-
</div>
114-
) : null}
57+
{/* Footer Logo */}
58+
{customization.footer.logo ? (
59+
<Image
60+
alt="Logo"
61+
sources={{
62+
light: {
63+
src: customization.footer.logo.light,
64+
},
65+
dark: customization.footer.logo.dark
66+
? {
67+
src: customization.footer.logo.dark,
68+
}
69+
: null,
70+
}}
71+
priority="lazy"
72+
style={[
73+
'w-auto',
74+
'max-w-40',
75+
'lg:max-w-64',
76+
'max-h-12',
77+
'object-contain',
78+
'object-left',
79+
'rounded',
80+
'straight-corners:rounded-sm',
81+
'order-1',
82+
]}
83+
sizes={[
84+
{
85+
width: 320,
86+
},
87+
]}
88+
/>
89+
) : null}
11590

116-
{/* Legal */}
117-
<div
118-
className={tcls(
119-
'mx-auto w-full grow text-xs text-tint items-center text-center order-4 flex flex-col gap-2 empty:hidden',
120-
customization.footer.groups.length == 0 &&
121-
'order-2 lg:flex-1 lg:w-auto lg:items-start lg:max-w-3xl self-center lg:text-start',
122-
customization.footer.groups.length == 0 &&
123-
customization.footer.logo == undefined &&
124-
'sm:w-auto sm:flex-1 sm:items-start sm:max-w-3xl sm:text-start',
125-
)}
126-
>
127-
{customization.footer.copyright ? (
128-
<p>{customization.footer.copyright}</p>
129-
) : null}
130-
</div>
91+
{/* Mode Switcher */}
92+
{customization.themes.toggeable ? (
93+
<div className="flex items-center justify-end ml-auto order-2 xl:hidden">
94+
<React.Suspense fallback={null}>
95+
<ThemeToggler />
96+
</React.Suspense>
97+
</div>
98+
) : null}
99+
100+
{/* Navigation Groups (split into equal columns) */}
101+
{customization.footer.groups?.length > 0 ? (
102+
<div
103+
className={tcls(
104+
'flex flex-col sm:flex-row mx-auto grow gap-10 sm:gap-6 order-3 w-full',
105+
!customization.footer.logo &&
106+
customization.footer.groups.length < 2 &&
107+
'sm:order-1 sm:flex-1 sm:w-auto sm:items-start sm:max-w-3xl self-center sm:text-start',
108+
)}
109+
>
110+
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
111+
(column, columnIndex) => (
112+
<div
113+
key={columnIndex}
114+
className="flex w-full flex-col gap-10"
115+
>
116+
{column.map((group, groupIndex) => (
117+
<FooterLinksGroup
118+
key={groupIndex}
119+
group={group}
120+
context={context}
121+
/>
122+
))}
123+
</div>
124+
),
125+
)}
126+
</div>
127+
) : null}
128+
129+
{/* Legal */}
130+
<div
131+
className={tcls(
132+
'mx-auto w-full grow text-xs text-tint items-center text-center order-4 flex flex-col gap-2 empty:hidden',
133+
customization.footer.groups.length == 0 &&
134+
'sm:order-1 sm:flex-1 sm:w-auto sm:items-start sm:max-w-3xl self-center sm:text-start',
135+
)}
136+
>
137+
{customization.footer.copyright ? (
138+
<p>{customization.footer.copyright}</p>
139+
) : null}
140+
</div>
141+
</div>
142+
<div className="hidden lg:block xl:basis-56 page-no-toc:hidden" />
143+
</footer>
131144
</div>
132-
</footer>
145+
</>
133146
);
134147
}

0 commit comments

Comments
 (0)