[DEV-2023] fix empty area on top of solutions (#1281)

* remove empty space on top of solution page * add changeset * rename headerPadding to paddingTop --------- Co-authored-by: marcobottaro <[email protected]>
pagopa · Jan 8, 2025 · 58a536a · 58a536a
1 parent b1fc08b
commit 58a536a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/.changeset/eight-lizards-heal.md 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
@@ -108,6 +108,7 @@ const Page = async ({ params }: { params: Params }) => {
     <>
       {structuredData}
       <GitBookTemplate
+        hasHeader={false}
         menuName={props.solution.title}
         breadcrumbs={[
           ...pageToBreadcrumbs('solutions', [

diff --git a/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx b/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx
@@ -19,7 +19,10 @@ import { useScrollUp } from '../ProductHeader/useScrollUp';
 import GuideMenuItems, { type GuideMenuItemsProps } from './Menu';
 import { useTranslations } from 'next-intl';
 
-type GuideMenuProps = GuideMenuItemsProps & { distanceFromTop?: number };
+type GuideMenuProps = GuideMenuItemsProps & {
+  distanceFromTop?: number;
+  hasHeader: boolean;
+};
 
 const GuideMenu = (menuProps: GuideMenuProps) => {
   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
@@ -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 (
     <FragmentProvider>
       <Box
@@ -47,6 +50,7 @@ const GitBookTemplate = ({
       >
         {menu && (
           <GuideMenu
+            hasHeader={hasHeader}
             menu={menu}
             assetsPrefix={bodyConfig.assetsPrefix}
             linkPrefix={pathPrefix}
@@ -67,7 +71,7 @@ const GitBookTemplate = ({
             },
           }}
         >
-          <Box sx={{ paddingTop: '60px', paddingX: '40px' }}>
+          <Box sx={{ paddingTop: paddingTop, paddingX: '40px' }}>
             <ProductBreadcrumbs breadcrumbs={breadcrumbs} />
           </Box>
           <Box sx={{ padding: '32px 40px' }}>
@@ -78,15 +82,15 @@ const GitBookTemplate = ({
           sx={{
             display: { xs: 'none', lg: 'initial' },
             position: 'relative',
-            padding: { lg: '80px 64px' },
+            padding: { lg: hasHeader ? '80px 64px' : '48px 64px' },
             width: { lg: '378px' },
           }}
         >
           <Box
             sx={{
               position: 'sticky',
               maxWidth: '378px',
-              top: 144,
+              top: hasHeader ? 144 : 64,
             }}
           >
             <GuideInPageMenu