diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx index 21b626ac2..ca54513f0 100644 --- a/packages/gitbook/src/components/Header/Dropdown.tsx +++ b/packages/gitbook/src/components/Header/Dropdown.tsx @@ -10,18 +10,22 @@ export type DropdownButtonProps = Omit< 'ref' >; -/** - * Button with a dropdown. - */ -export function Dropdown(props: { +export type DropdownProps = { /** Content of the button */ button: (buttonProps: DropdownButtonProps) => React.ReactNode; /** Content of the dropdown */ children: React.ReactNode; /** Custom styles */ className?: ClassValue; -}) { - const { button, children, className } = props; + /** Whether to use fixed positioning (for fixed navbars) */ + useFixedPosition?: boolean; +}; + +/** + * Button with a dropdown. + */ +export function Dropdown(props: DropdownProps) { + const { button, children, className, useFixedPosition = false } = props; const dropdownId = useId(); return ( @@ -53,7 +57,7 @@ export function Dropdown(props: { className )} > -
+
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 35c2583c4..8e2aac8a4 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -212,6 +212,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo siteSpace={siteSpace} siteSpaces={siteSpaces} className="w-full grow py-1" + useFixedPosition={true} />
)} diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx index 39e81e59f..c1fc4ea38 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -3,7 +3,7 @@ import type { SiteSpace } from '@gitbook/api'; import { tcls } from '@/lib/tailwind'; import type { GitBookSiteContext } from '@v2/lib/context'; -import { Dropdown, DropdownChevron, DropdownMenu } from './Dropdown'; +import { Dropdown, DropdownChevron, DropdownMenu, type DropdownProps } from './Dropdown'; import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem'; export function SpacesDropdown(props: { @@ -11,7 +11,7 @@ export function SpacesDropdown(props: { siteSpace: SiteSpace; siteSpaces: SiteSpace[]; className?: string; -}) { +} & Partial) { const { context, siteSpace, siteSpaces, className } = props; const { linker } = context; @@ -67,6 +67,7 @@ export function SpacesDropdown(props: {
)} + {...props} > {siteSpaces.map((otherSiteSpace, index) => (