Changeset

.changeset/swift-dryers-sing.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix dropdown menu not staying fixed

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

@@ -10,18 +10,22 @@ export type DropdownButtonProps<E extends HTMLElement = HTMLElement> = Omit<
     'ref'
 >;
 
-/**
- * Button with a dropdown.
- */
-export function Dropdown<E extends HTMLElement>(props: {
+export type DropdownProps<E extends HTMLElement = HTMLElement> = {
     /** Content of the button */
     button: (buttonProps: DropdownButtonProps<E>) => 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<E extends HTMLElement = HTMLElement>(props: DropdownProps<E>) {
+    const { button, children, className, useFixedPosition = false } = props;
     const dropdownId = useId();
 
     return (
@@ -53,7 +57,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                     className
                 )}
             >
-                <div className="fixed z-50 w-52">
+                <div className={tcls(useFixedPosition ? 'fixed' : 'absolute', 'z-50 w-52')}>
                     <div
                         className={tcls(
                             'mt-2',
@@ -92,6 +96,7 @@ export function DropdownChevron() {
                 'ms-1',
                 'transition-all',
                 'group-hover/dropdown:opacity-11',
+                'group-hover/dropdown:rotate-180',
                 'group-focus-within/dropdown:rotate-180'
             )}
         />

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}
                                     />
                                 </div>
                             )}

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<DropdownProps>
+) {
     const { context, siteSpace, siteSpaces, className } = props;
     const { linker } = context;
 
@@ -67,6 +69,7 @@ export function SpacesDropdown(props: {
                     <DropdownChevron />
                 </div>
             )}
+            {...props}
         >
             <DropdownMenu>
                 {siteSpaces.map((otherSiteSpace, index) => (