diff --git a/.changeset/swift-dryers-sing.md b/.changeset/swift-dryers-sing.md new file mode 100644 index 000000000..ecec9f2a4 --- /dev/null +++ b/.changeset/swift-dryers-sing.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Fix dropdown menu not staying fixed 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..42d6a8f5a 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -3,15 +3,17 @@ 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: { - context: GitBookSiteContext; - siteSpace: SiteSpace; - siteSpaces: SiteSpace[]; - className?: string; -}) { +export function SpacesDropdown( + props: { + context: GitBookSiteContext; + siteSpace: SiteSpace; + siteSpaces: SiteSpace[]; + className?: string; + } & Partial +) { const { context, siteSpace, siteSpaces, className } = props; const { linker } = context; @@ -67,6 +69,7 @@ export function SpacesDropdown(props: {
)} + {...props} > {siteSpaces.map((otherSiteSpace, index) => (