Skip to content

Commit

Permalink
Balance links with search bar and variant dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@zenoachtig
zenoachtig committed Jan 23, 2025
1 parent 3c21a5e commit a65654e
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 39 deletions.
55 changes: 29 additions & 26 deletions packages/gitbook/src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export function Header(props: {
MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR
? 'lg:basis-72'
: '',
isMultiVariants && 'page-no-toc:lg:basis-auto',
)}
>
<HeaderMobileMenu
Expand All @@ -113,11 +114,37 @@ export function Header(props: {
<HeaderLogo site={site} space={space} customization={customization} />
</div>

{isMultiVariants && (
<div className="hidden page-no-toc:flex mr-auto">
<SpacesDropdown
space={space}
spaces={spaces}
className={
!isCustomizationDefault
? `bg-header-link/2 text-header-link ring-header-link/4
dark:bg-header-link/2 dark:text-header-link dark:ring-header-link/4
group-hover/dropdown:bg-header-link/3 group-hover/dropdown:text-header-link group-hover/dropdown:ring-header-link/6
dark:group-hover/dropdown:bg-header-link/3 dark:group-hover/dropdown:text-header-link dark:group-hover/dropdown:ring-header-link/6
group-focus-within/dropdown:bg-header-link/3 group-focus-within/dropdown:text-header-link group-focus-within/dropdown:ring-header-link/6
dark:group-focus-within/dropdown:bg-header-link/3 dark:group-focus-within/dropdown:text-header-link dark:group-focus-within/dropdown:ring-header-link/6
contrast-more:bg-header-background contrast-more:text-header-link contrast-more:ring-header-link
contrast-more:group-hover/dropdown:text-header-link contrast-more:group-hover/dropdown:ring-header-link
contrast-more:dark:group-hover/dropdown:text-header-link contrast-more:dark:group-hover/dropdown:ring-header-link
contrast-more:group-focus-within/dropdown:text-header-link contrast-more:group-focus-within/dropdown:ring-header-link
contrast-more:dark:group-focus-within/dropdown:text-header-link contrast-more:dark:group-focus-within/dropdown:ring-header-link`
: ''
}
/>
</div>
)}

<div
className={tcls(
'flex',
'gap-4',
'md:min-w-56',
'items-center',
'grow-0 shrink-0',
customization.header.links.length <=
MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR
Expand All @@ -128,38 +155,14 @@ export function Header(props: {
'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]',
'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]',
'lg:mr-auto',
'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),1.5rem)]',
'page-no-toc:xl:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),1.5rem)]',
isMultiVariants && 'page-no-toc:lg:ml-0 page-no-toc:xl:ml-0',
'order-last',
'lg:order-[unset]',
]
: ['order-last'],
)}
>
{isMultiVariants && (
<div className="hidden page-no-toc:flex mr-auto">
<SpacesDropdown
space={space}
spaces={spaces}
className={
!isCustomizationDefault
? `bg-header-link/2 text-header-link ring-header-link/4
dark:bg-header-link/2 dark:text-header-link dark:ring-header-link/4
group-hover/dropdown:bg-header-link/3 group-hover/dropdown:text-header-link group-hover/dropdown:ring-header-link/6
dark:group-hover/dropdown:bg-header-link/3 dark:group-hover/dropdown:text-header-link dark:group-hover/dropdown:ring-header-link/6
group-focus-within/dropdown:bg-header-link/3 group-focus-within/dropdown:text-header-link group-focus-within/dropdown:ring-header-link/6
dark:group-focus-within/dropdown:bg-header-link/3 dark:group-focus-within/dropdown:text-header-link dark:group-focus-within/dropdown:ring-header-link/6
contrast-more:bg-header-background contrast-more:text-header-link contrast-more:ring-header-link
contrast-more:group-hover/dropdown:text-header-link contrast-more:group-hover/dropdown:ring-header-link
contrast-more:dark:group-hover/dropdown:text-header-link contrast-more:dark:group-hover/dropdown:ring-header-link
contrast-more:group-focus-within/dropdown:text-header-link contrast-more:group-focus-within/dropdown:ring-header-link
contrast-more:dark:group-focus-within/dropdown:text-header-link contrast-more:dark:group-focus-within/dropdown:ring-header-link`
: ''
}
/>
</div>
)}

<Suspense fallback={null}>
<SearchButton
style={
Expand Down
2 changes: 1 addition & 1 deletion packages/gitbook/src/components/Header/HeaderLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
<div
className={tcls(
styles.containerHeaderlinks,
'grow shrink flex justify-end items-center gap-x-4 lg:gap-x-6 min-w-9 z-20 lg:[&>.button+.button]:-ml-2',
'grow-[2.5] shrink flex justify-end items-center gap-x-4 lg:gap-x-6 min-w-9 z-20 lg:[&>.button+.button]:-ml-2',
)}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion packages/gitbook/src/components/Header/HeaderLogo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function LogoFallback(props: HeaderLogoProps) {
<div
className={tcls(
'text-pretty',
'line-clamp-3',
'line-clamp-2',
'tracking-tight',
'max-w-[18ch]',
'lg:max-w-[24ch]',
Expand Down
2 changes: 1 addition & 1 deletion packages/gitbook/src/components/Header/SpacesDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
className,
)}
>
<span className={tcls('line-clamp-2', 'grow')}>{space.title}</span>
<span className={tcls('line-clamp-1', 'grow')}>{space.title}</span>
<DropdownChevron />
</div>
)}
Expand Down
22 changes: 12 additions & 10 deletions packages/gitbook/src/components/Header/headerLinks.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@
}
}

@media(max-width:1023px) {
.containerHeaderlinks {
container-type: inline-size;
container-name: headerlinks;
}
.containerHeaderlinks {
container-type: inline-size;
container-name: headerlinks;
}

/* @media(max-width:1279px) {
}
@media(max-width:1279px) {
Expand All @@ -36,7 +38,7 @@
display: flex;
}
}
}
} */

/* @media (max-width: 1024px) {
.containerHeaderlinks > :nth-child(n + 4) {
Expand Down Expand Up @@ -96,7 +98,7 @@
}
}
}
@container headerlinks ( width < 400px ) {
@container headerlinks ( width < 450px ) {
.containerHeaderlinks > :nth-child(n + 3) {
display: none;
}
Expand All @@ -107,7 +109,7 @@
}
}
}
@container headerlinks ( width < 500px ) {
@container headerlinks ( width < 550px ) {
.containerHeaderlinks > :nth-child(n + 4) {
display: none;
}
Expand All @@ -118,7 +120,7 @@
}
}
}
@container headerlinks ( width < 600px ) {
@container headerlinks ( width < 650px ) {
.containerHeaderlinks > :nth-child(n + 5) {
display: none;
}
Expand All @@ -129,7 +131,7 @@
}
}
}
@container headerlinks ( width < 700px ) {
@container headerlinks ( width < 750px ) {
.containerHeaderlinks > :nth-child(n + 6) {
display: none;
}
Expand Down

0 comments on commit a65654e

Please sign in to comment.