gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-18 00:25:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Balance links with search bar and variant dropdown

Browse Source
This commit is contained in:
Zeno Kapitein
2025-01-22 14:41:45 +01:00
parent 3c21a5e820
commit a65654edfb
5 changed files with 53 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/Header/Header.tsx
+38 -35
View File
@@ -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
@@ -113,36 +114,14 @@ export function Header(props: {
<HeaderLogo site={site} space={space} customization={customization} />
</div>
<div
className={tcls(
'flex',
'gap-4',
'md:min-w-56',
'grow-0 shrink-0',
customization.header.links.length <=
MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR
? [
'lg:grow',
'lg:min-w-40',
'max-w-lg',
'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)]',
'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
{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
@@ -154,12 +133,36 @@ export function Header(props: {
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>
)}
<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
? [
'lg:grow',
'lg:min-w-40',
'max-w-lg',
'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: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'],
)}
>
<Suspense fallback={null}>
<SearchButton
style={
packages/gitbook/src/components/Header/HeaderLinks.tsx
+1 -1
View File
@@ -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}
packages/gitbook/src/components/Header/HeaderLogo.tsx
+1 -1
View File
@@ -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]',
packages/gitbook/src/components/Header/SpacesDropdown.tsx
+1 -1
View File
@@ -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>
)}
packages/gitbook/src/components/Header/headerLinks.module.css
+12 -10
View File
@@ -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) {
@@ -36,7 +38,7 @@
display: flex;
}
}
}
} */
/* @media (max-width: 1024px) {
.containerHeaderlinks > :nth-child(n + 4) {
@@ -96,7 +98,7 @@
}
}
}
@container headerlinks ( width < 400px ) {
@container headerlinks ( width < 450px ) {
.containerHeaderlinks > :nth-child(n + 3) {
display: none;
}
@@ -107,7 +109,7 @@
}
}
}
@container headerlinks ( width < 500px ) {
@container headerlinks ( width < 550px ) {
.containerHeaderlinks > :nth-child(n + 4) {
display: none;
}
@@ -118,7 +120,7 @@
}
}
}
@container headerlinks ( width < 600px ) {
@container headerlinks ( width < 650px ) {
.containerHeaderlinks > :nth-child(n + 5) {
display: none;
}
@@ -129,7 +131,7 @@
}
}
}
@container headerlinks ( width < 700px ) {
@container headerlinks ( width < 750px ) {
.containerHeaderlinks > :nth-child(n + 6) {
display: none;
}