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

Grow search bar conditionally if <5 header links are present

Browse Source
This commit is contained in:
Zeno Kapitein
2025-01-21 18:44:08 +01:00
parent 1762f85ef9
commit 41cba63f27
2 changed files with 68 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/Header/Header.tsx
+63 -42
View File
@@ -17,6 +17,8 @@ import { SearchButton } from '../Search';
import { SiteSectionTabs } from '../SiteSections';
import { HeaderMobileMenu } from './HeaderMobileMenu';
const MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR = 4;
/**
* Render the header for the space.
*/
@@ -90,6 +92,10 @@ export function Header(props: {
'flex max-w-full',
isMultiVariants && 'page-no-toc:max-[400px]:w-full',
'shrink min-w-0 gap-2 lg:gap-4 justify-start items-center',
customization.header.links.length <=
MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR
? 'lg:basis-72'
: '',
)}
>
<HeaderMobileMenu
@@ -105,14 +111,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
<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',
'max-w-lg',
'lg:ml-[max(calc((100%-18rem-48rem-4rem)/2),1rem)]',
'xl:ml-[max(calc((100%-18rem-48rem-14rem-4rem)/2),1rem)]',
'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-4rem)/2),1rem)]',
'order-last',
'lg:order-[unset]',
// isMultiVariants &&
// 'page-no-toc:order-last page-no-toc:ml-0 page-no-toc:grow-0',
]
: ['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
@@ -124,41 +153,12 @@ 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>
)}
{customization.header.links.length > 0 && (
<HeaderLinks>
{customization.header.links.map((link, index) => {
return (
<HeaderLink
key={index}
link={link}
context={context}
customization={customization}
/>
);
})}
<HeaderLinkMore
label={t(getSpaceLanguage(customization), 'more')}
links={customization.header.links}
context={context}
customization={customization}
/>
</HeaderLinks>
)}
<div
className={tcls(
'flex',
'md:min-w-56',
'grow-0',
'shrink-0',
'justify-self-end',
: ''
}
/>
</div>
)}
>
<Suspense fallback={null}>
<SearchButton
style={
@@ -218,6 +218,27 @@ export function Header(props: {
</SearchButton>
</Suspense>
</div>
{customization.header.links.length > 0 && (
<HeaderLinks>
{customization.header.links.map((link, index) => {
return (
<HeaderLink
key={index}
link={link}
context={context}
customization={customization}
/>
);
})}
<HeaderLinkMore
label={t(getSpaceLanguage(customization), 'more')}
links={customization.header.links}
context={context}
customization={customization}
/>
</HeaderLinks>
)}
</div>
</div>
</div>
packages/gitbook/src/components/Header/headerLinks.module.css
+5 -5
View File
@@ -21,7 +21,7 @@
}
}
}
@container headerlinks ( width < 300px ) {
@container headerlinks ( width < 250px ) {
.containerHeaderlinks > :nth-child(n + 2) {
display: none;
}
@@ -32,7 +32,7 @@
}
}
}
@container headerlinks ( width < 450px ) {
@container headerlinks ( width < 350px ) {
.containerHeaderlinks > :nth-child(n + 3) {
display: none;
}
@@ -43,7 +43,7 @@
}
}
}
@container headerlinks ( width < 600px ) {
@container headerlinks ( width < 450px ) {
.containerHeaderlinks > :nth-child(n + 4) {
display: none;
}
@@ -54,7 +54,7 @@
}
}
}
@container headerlinks ( width < 750px ) {
@container headerlinks ( width < 550px ) {
.containerHeaderlinks > :nth-child(n + 5) {
display: none;
}
@@ -65,7 +65,7 @@
}
}
}
@container headerlinks ( width < 850px ) {
@container headerlinks ( width < 650px ) {
.containerHeaderlinks > :nth-child(n + 6) {
display: none;
}