Skip to content

Commit aea3862

Browse files
nolannbironnolannbiron
committed
Update design and handle innerHeader
1 parent abf1b3b commit aea3862

File tree

6 files changed

+87
-38
lines changed

6 files changed

+87
-38
lines changed

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -48,26 +48,24 @@ export function DropdownMenu(props: {
4848
{button}
4949
</RadixDropdownMenu.Trigger>
5050

51-
<RadixDropdownMenu.Portal>
52-
<RadixDropdownMenu.Content
53-
data-testid="dropdown-menu"
54-
hideWhenDetached
55-
collisionPadding={8}
56-
onMouseEnter={() => setHovered(true)}
57-
onMouseLeave={() => setHovered(false)}
58-
align="start"
59-
className="z-40 animate-present pt-2"
51+
<RadixDropdownMenu.Content
52+
data-testid="dropdown-menu"
53+
hideWhenDetached
54+
collisionPadding={8}
55+
onMouseEnter={() => setHovered(true)}
56+
onMouseLeave={() => setHovered(false)}
57+
align="start"
58+
className="z-[9999] animate-present pt-2"
59+
>
60+
<div
61+
className={tcls(
62+
'flex max-h-80 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80',
63+
className
64+
)}
6065
>
61-
<div
62-
className={tcls(
63-
'flex max-h-80 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80',
64-
className
65-
)}
66-
>
67-
{children}
68-
</div>
69-
</RadixDropdownMenu.Content>
70-
</RadixDropdownMenu.Portal>
66+
{children}
67+
</div>
68+
</RadixDropdownMenu.Content>
7169
</RadixDropdownMenu.Root>
7270
);
7371
}

‎packages/gitbook/src/components/Header/mobile-menu/MobileMenuSheet.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
'use client';
22

3-
import { Sheet, SheetContent } from '@/components/utils/Sheet';
3+
import {
4+
Sheet,
5+
SheetContent,
6+
SheetDescription,
7+
SheetHeader,
8+
SheetTitle,
9+
} from '@/components/utils/Sheet';
410
import { useMobileMenuSheet } from './useMobileMenuSheet';
511

612
export function MobileMenuSheet({ children }: { children: React.ReactNode }) {
@@ -11,8 +17,14 @@ export function MobileMenuSheet({ children }: { children: React.ReactNode }) {
1117
<SheetContent
1218
aria-label="Mobile menu"
1319
overlayClassName="lg:hidden"
14-
className="pt-10 lg:hidden"
20+
className="lg:hidden"
1521
>
22+
{/** Needed for screen readers */}
23+
<SheetHeader className="sr-only">
24+
<SheetTitle>Table of contents</SheetTitle>
25+
<SheetDescription>A list of all the pages in the site.</SheetDescription>
26+
</SheetHeader>
27+
1628
{children}
1729
</SheetContent>
1830
</Sheet>

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,25 @@ export function SpaceLayout(props: {
6969
<Announcement context={context} />
7070
<Header withTopHeader={withTopHeader} context={context} />
7171
<MobileMenuSheet>
72-
<TOCScrollContent context={context} />
72+
<TOCScrollContent
73+
innerHeader={
74+
<div className="pl-5">
75+
{isMultiVariants ? (
76+
<SpacesDropdown
77+
context={context}
78+
siteSpace={siteSpace}
79+
siteSpaces={siteSpaces}
80+
className={tcls(
81+
'w-full',
82+
'page-no-toc:hidden',
83+
'site-header-none:page-no-toc:flex'
84+
)}
85+
/>
86+
) : null}
87+
</div>
88+
}
89+
context={context}
90+
/>
7391
</MobileMenuSheet>
7492
<div className="scroll-nojump">
7593
<div
@@ -105,7 +123,7 @@ export function SpaceLayout(props: {
105123
}
106124
innerHeader={
107125
// 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.
108-
<>
126+
<div className="inline-flex w-full flex-col gap-2 px-4">
109127
{!withTopHeader && (
110128
<div className={tcls('hidden', 'lg:block')}>
111129
<React.Suspense fallback={null}>
@@ -141,7 +159,7 @@ export function SpaceLayout(props: {
141159
)}
142160
/>
143161
)}
144-
</>
162+
</div>
145163
}
146164
/>
147165
<div className="flex min-w-0 flex-1 flex-col">{children}</div>

‎packages/gitbook/src/components/TableOfContents/TOCScrollContent.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,12 @@ export function TOCScrollContent(props: {
3030
'straight-corners:rounded-none'
3131
)}
3232
>
33-
{innerHeader && <div className="px-5 *:my-4">{innerHeader}</div>}
33+
{innerHeader && <div className="*:mt-0.5 max-lg:mt-2 max-lg:pr-12">{innerHeader}</div>}
3434

3535
<TOCScrollContainer // The scrollview inside the sidebar
3636
className={tcls(
3737
'flex flex-grow flex-col p-2',
38+
innerHeader ? 'mt-0' : 'mt-8',
3839
customization.trademark.enabled && 'pb-20',
3940
'gutter-stable overflow-y-auto',
4041
'max-lg:[&::-webkit-scrollbar]:hidden',

‎packages/gitbook/src/components/primitives/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ export function Button({
6060
...rest
6161
}: ButtonProps & { target?: HTMLAttributeAnchorTarget }) {
6262
const sizes = {
63-
default: ['text-base', 'px-4', 'py-2'],
64-
medium: ['text-sm', 'px-3', 'py-1.5'],
63+
default: ['text-base', 'py-2', iconOnly ? 'px-2' : 'px-4'],
64+
medium: ['text-sm', 'py-1.5', iconOnly ? 'px-1.5' : 'px-3'],
6565
small: ['text-xs', 'py-2', iconOnly ? 'px-2' : 'px-3'],
6666
};
6767

‎packages/gitbook/src/components/utils/Sheet.tsx

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as SheetPrimitive from '@radix-ui/react-dialog';
44
import type * as React from 'react';
55

6+
import { Button } from '@/components/primitives';
67
import { tcls } from '@/lib/tailwind';
7-
import { Icon } from '@gitbook/icons';
88

99
export function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
1010
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
@@ -18,6 +18,10 @@ export function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimit
1818
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
1919
}
2020

21+
export function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
22+
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
23+
}
24+
2125
function SheetOverlay({
2226
className,
2327
...props
@@ -26,7 +30,7 @@ function SheetOverlay({
2630
<SheetPrimitive.Overlay
2731
data-slot="sheet-overlay"
2832
className={tcls(
29-
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-tint-12/4 backdrop-blur-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:bg-tint-1/6',
33+
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-30 bg-tint-12/4 backdrop-blur-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:bg-tint-1/6',
3034
className
3135
)}
3236
{...props}
@@ -50,23 +54,39 @@ export function SheetContent({
5054
<SheetPrimitive.Content
5155
data-slot="sheet-content"
5256
className={tcls(
53-
'fixed z-50 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
54-
'bg-tint-base theme-gradient-tint:bg-gradient-tint theme-gradient:bg-gradient-primary theme-muted:bg-tint-subtle [html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
57+
'fixed z-30 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
5558
'border-tint-subtle',
56-
'inset-x-0 inset-y-1 w-10/12 rounded-xl border sm:max-w-sm',
59+
'bg-tint-base',
60+
'sidebar-filled:bg-tint-subtle',
61+
'theme-muted:bg-tint-subtle',
62+
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
63+
'[html.sidebar-filled.theme-muted_&]:bg-tint-base',
64+
'[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
65+
'[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
66+
'[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
67+
'inset-x-1.5 inset-y-1.5 w-10/12 rounded-xl border sm:max-w-sm',
5768
side === 'right' &&
58-
'right-1 data-[state=closed]:animate-exitToRight data-[state=open]:animate-enterFromRight',
69+
'right-1.5 data-[state=closed]:animate-exitToRight data-[state=open]:animate-enterFromRight',
5970
side === 'left' &&
60-
'left-1 data-[state=closed]:animate-exitToLeft data-[state=open]:animate-enterFromLeft',
71+
'left-1.5 data-[state=closed]:animate-exitToLeft data-[state=open]:animate-enterFromLeft',
6172
className
6273
)}
6374
{...props}
6475
>
6576
{children}
66-
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none">
67-
<Icon icon="close" className="size-4 text-tint-subtle" />
68-
<span className="sr-only">Close</span>
69-
</SheetPrimitive.Close>
77+
78+
<SheetClose asChild>
79+
<Button
80+
data-slot="sheet-close"
81+
variant="blank"
82+
icon="close"
83+
iconOnly
84+
size="default"
85+
className="absolute top-3 right-2"
86+
>
87+
<span className="sr-only">Close</span>
88+
</Button>
89+
</SheetClose>
7090
</SheetPrimitive.Content>
7191
</>
7292
);

0 commit comments

Comments
 (0)