From 473255266b54685d6b8872ecd1c520ef02c0c521 Mon Sep 17 00:00:00 2001
From: Marcello Bertoli <marcello.bertoli@uqido.com>
Date: Tue, 17 Dec 2024 14:47:25 +0100
Subject: [PATCH 1/3] remove empty space on top of solution page

---
 .../[...solutionSubPathSlugs]/page.tsx            |  1 +
 .../src/components/atoms/GuideMenu/GuideMenu.tsx  | 15 +++++++++++++--
 .../templates/GitBookTemplate/GitBookTemplate.tsx | 10 +++++++---
 3 files changed, 21 insertions(+), 5 deletions(-)

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}
       <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
index 262675b5ee..43ee0fa23c 100644
--- 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
index 7bc64a4fde..d457ef562a 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 headerPadding = 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: headerPadding, paddingX: '40px' }}>
             <ProductBreadcrumbs breadcrumbs={breadcrumbs} />
           </Box>
           <Box sx={{ padding: '32px 40px' }}>
@@ -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,
             }}
           >
             <GuideInPageMenu

From 0872d0ab9d1eed52454572cf863c7d79e27f596b Mon Sep 17 00:00:00 2001
From: Marcello Bertoli <marcello.bertoli@uqido.com>
Date: Tue, 17 Dec 2024 14:48:35 +0100
Subject: [PATCH 2/3] add changeset

---
 .changeset/eight-lizards-heal.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eight-lizards-heal.md

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

From bc2adaca3b24b08d0a683dd802e68ce619c1dae7 Mon Sep 17 00:00:00 2001
From: Marcello Bertoli <marcello.bertoli@uqido.com>
Date: Wed, 18 Dec 2024 14:28:55 +0100
Subject: [PATCH 3/3] rename headerPadding to paddingTop

---
 .../components/templates/GitBookTemplate/GitBookTemplate.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
index d457ef562a..aab80315bd 100644
--- a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
+++ b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
@@ -37,7 +37,7 @@ const GitBookTemplate = ({
   contentMarginTop = 75,
   hasHeader = true,
 }: GitBookTemplateProps) => {
-  const headerPadding = hasHeader ? '60px' : '-80px';
+  const paddingTop = hasHeader ? '60px' : '-80px';
   return (
     <FragmentProvider>
       <Box
@@ -71,7 +71,7 @@ const GitBookTemplate = ({
             },
           }}
         >
-          <Box sx={{ paddingTop: headerPadding, paddingX: '40px' }}>
+          <Box sx={{ paddingTop: paddingTop, paddingX: '40px' }}>
             <ProductBreadcrumbs breadcrumbs={breadcrumbs} />
           </Box>
           <Box sx={{ padding: '32px 40px' }}>