Add spaces dropdown to CompactHeader component (#2439)

GitbookIO · Aug 28, 2024 · 160ae3d · 160ae3d
1 parent c079c3c
commit 160ae3d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/packages/gitbook/src/components/Header/CompactHeader.tsx b/packages/gitbook/src/components/Header/CompactHeader.tsx
@@ -12,6 +12,7 @@ import { getSpaceLanguage } from '@/intl/server';
 import { tcls } from '@/lib/tailwind';
 
 import { HeaderLogo } from './HeaderLogo';
+import { SpacesDropdown } from './SpacesDropdown';
 import { SearchButton } from '../Search';
 
 /**
@@ -23,7 +24,7 @@ export function CompactHeader(props: {
     spaces: Space[];
     customization: CustomizationSettings | SiteCustomizationSettings;
 }) {
-    const { space, parent, customization } = props;
+    const { space, spaces, parent, customization } = props;
 
     return (
         <div
@@ -53,6 +54,9 @@ export function CompactHeader(props: {
                     'justify-self-end',
                 )}
             >
+                <div className={tcls('mb-2')}>
+                    <SpacesDropdown space={space} spaces={spaces} buttonKind="bordered" />
+                </div>
                 <React.Suspense fallback={null}>
                     <SearchButton>
                         <span className={tcls('flex-1')}>

diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -38,6 +38,8 @@ export function Dropdown<E extends HTMLElement>(props: {
                 aria-orientation="vertical"
                 aria-labelledby={dropdownId}
                 className={tcls(
+                    'w-52',
+                    'max-h-56',
                     'flex',
                     'absolute',
                     'top-full',
@@ -55,8 +57,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                 <div
                     className={tcls(
                         'mt-2',
-                        'w-52',
-                        'max-h-56',
+                        'w-full',
                         'bg-light',
                         'rounded-lg',
                         'straight-corners:rounded-sm',

diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
@@ -5,11 +5,16 @@ import { tcls } from '@/lib/tailwind';
 import { Dropdown, DropdownChevron, DropdownMenu } from './Dropdown';
 import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem';
 
-export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
-    const { space, spaces } = props;
+export function SpacesDropdown(props: {
+    space: Space;
+    spaces: Space[];
+    buttonKind?: 'default' | 'bordered';
+}) {
+    const { space, spaces, buttonKind = 'default' } = props;
 
     return (
         <Dropdown
+            className={buttonKind === 'bordered' ? tcls('w-full') : undefined}
             button={(buttonProps) => (
                 <div
                     {...buttonProps}
@@ -22,6 +27,23 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
                         'px-3',
                         'py-1.5',
                         'text-header-link-500',
+                        buttonKind === 'bordered'
+                            ? [
+                                  'ring-1',
+                                  'ring-inset',
+                                  'ring-dark/2',
+                                  'pointer-events-auto',
+                                  'justify-between',
+                                  'bg-light',
+                                  'dark:bg-dark',
+                                  'rounded-lg',
+                                  'straight-corners:rounded-none',
+                                  'lg:ring-0',
+                                  'border',
+                                  'border-dark/2',
+                                  'dark:border-light/2',
+                              ]
+                            : [],
                     )}
                 >
                     {space.title}