diff --git a/.changeset/eight-lizards-heal.md b/.changeset/eight-lizards-heal.md new file mode 100644 index 0000000000..6c19aa5a85 --- /dev/null +++ b/.changeset/eight-lizards-heal.md @@ -0,0 +1,5 @@ +--- +"nextjs-website": patch +--- + +Fix empty space on top of Solution page diff --git a/apps/nextjs-website/src/app/solutions/[solutionSlug]/[...solutionSubPathSlugs]/page.tsx b/apps/nextjs-website/src/app/solutions/[solutionSlug]/[...solutionSubPathSlugs]/page.tsx index b833b9a97c..59b5d5e5e1 100644 --- a/apps/nextjs-website/src/app/solutions/[solutionSlug]/[...solutionSubPathSlugs]/page.tsx +++ b/apps/nextjs-website/src/app/solutions/[solutionSlug]/[...solutionSubPathSlugs]/page.tsx @@ -108,6 +108,7 @@ const Page = async ({ params }: { params: Params }) => { <> {structuredData} { const [open, setOpen] = useState(false); @@ -36,6 +39,14 @@ const GuideMenu = (menuProps: GuideMenuProps) => { const height = `calc(100vh - ${top}px)`; + const topStyle = menuProps.hasHeader + ? { xs: top + 62, sm: top + 90, md: top + 77 } + : { + xs: top, + sm: top, + md: top, + }; + const handleClick = useCallback(() => { setOpen((prev) => !prev); }, []); @@ -61,7 +72,7 @@ const GuideMenu = (menuProps: GuideMenuProps) => { backgroundColor: palette.grey[50], flexShrink: 0, position: 'sticky', - top: { xs: top + 62, sm: top + 90, md: top + 77 }, + top: topStyle, height: { lg: height }, overflowY: 'auto', transition: 'all 0.5s linear', diff --git a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx index 7bc64a4fde..aab80315bd 100644 --- a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx +++ b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx @@ -17,6 +17,7 @@ export type GitBookTemplateProps = { contentMarginTop?: number; versions?: GuideMenuItemsProps['versions']; versionName?: GuideMenuItemsProps['versionName']; + hasHeader?: boolean; } & Pick< ProductGuidePageProps, 'menu' | 'body' | 'bodyConfig' | 'path' | 'pathPrefix' @@ -34,7 +35,9 @@ const GitBookTemplate = ({ breadcrumbs, menuDistanceFromTop, contentMarginTop = 75, + hasHeader = true, }: GitBookTemplateProps) => { + const paddingTop = hasHeader ? '60px' : '-80px'; return ( {menu && ( - + @@ -78,7 +82,7 @@ const GitBookTemplate = ({ sx={{ display: { xs: 'none', lg: 'initial' }, position: 'relative', - padding: { lg: '80px 64px' }, + padding: { lg: hasHeader ? '80px 64px' : '48px 64px' }, width: { lg: '378px' }, }} > @@ -86,7 +90,7 @@ const GitBookTemplate = ({ sx={{ position: 'sticky', maxWidth: '378px', - top: 144, + top: hasHeader ? 144 : 64, }} >