[DEV-1954] fix guide table of content (#1171)

* set zindex to 51 * WIP: fix header and table of content position * fix header position * add changeset, update padding * missing reference update * fix required by reviewer * fix product bar heigth * fix issue with dropdown size --------- Co-authored-by: marcobottaro <[email protected]>
pagopa · Oct 10, 2024 · 27ed2cf · 27ed2cf
1 parent 3881914
commit 27ed2cf
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 22 deletions.
diff --git a/.changeset/tasty-balloons-joke.md b/.changeset/tasty-balloons-joke.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Fix the header in the guide page
diff --git a/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx b/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx
@@ -21,8 +21,6 @@ import { useTranslations } from 'next-intl';
 
 type GuideMenuProps = GuideMenuItemsProps & { distanceFromTop?: number };
 
-export const PRODUCT_HEADER_HEIGHT = 75;
-
 const GuideMenu = (menuProps: GuideMenuProps) => {
   const [open, setOpen] = useState(false);
   const { palette } = useTheme();
@@ -34,12 +32,7 @@ const GuideMenu = (menuProps: GuideMenuProps) => {
   const segments = currentPath.split('/');
   const expanded = segments.map((_, i) => segments.slice(0, i + 1).join('/'));
 
-  const productHeaderHeight =
-    menuProps.distanceFromTop ?? PRODUCT_HEADER_HEIGHT;
-
-  const top = scrollUp
-    ? SITE_HEADER_HEIGHT + productHeaderHeight
-    : productHeaderHeight;
+  const top = scrollUp ? SITE_HEADER_HEIGHT : 0;
 
   const height = `calc(100vh - ${top}px)`;
 
@@ -68,13 +61,13 @@ const GuideMenu = (menuProps: GuideMenuProps) => {
           backgroundColor: palette.grey[50],
           flexShrink: 0,
           position: 'sticky',
-          top,
+          top: { xs: top + 62, sm: top + 90, md: top + 77 },
           height: { lg: height },
           overflowY: 'auto',
           transition: 'all 0.5s linear',
           scrollbarWidth: 'thin',
           width: { lg: '347px' },
-          zIndex: 1,
+          zIndex: 51,
         }}
       >
         <Stack

diff --git a/apps/nextjs-website/src/components/atoms/ProductBreadcrumbs/ProductBreadcrumbs.tsx b/apps/nextjs-website/src/components/atoms/ProductBreadcrumbs/ProductBreadcrumbs.tsx
@@ -23,7 +23,7 @@ const ProductBreadcrumbs = ({ breadcrumbs }: ProductBreadcrumbsProps) => {
       component='div'
       sx={{
         display: { xs: 'none', md: 'block' },
-        paddingY: '20px',
+        paddingY: '24px',
         zIndex: 50,
         position: 'relative',
       }}

diff --git a/apps/nextjs-website/src/components/atoms/ProductHeader/ProductHeader.tsx b/apps/nextjs-website/src/components/atoms/ProductHeader/ProductHeader.tsx
@@ -12,6 +12,8 @@ type ProductHeaderProps = {
   path: string;
 };
 
+export const PRODUCT_HEADER_HEIGHT = 77;
+
 const ProductHeader: FC<ProductHeaderProps> = ({ product, path }) => {
   const { palette } = useTheme();
   const scrollUp = useScrollUp();

diff --git a/apps/nextjs-website/src/components/molecules/BlocksRendererClient/BlocksRendererClient.tsx b/apps/nextjs-website/src/components/molecules/BlocksRendererClient/BlocksRendererClient.tsx
@@ -4,10 +4,10 @@ import { BlocksContent, BlocksRenderer } from '@strapi/blocks-react-renderer';
 import Image from 'next/image';
 import { SxProps } from '@mui/system';
 import { computeId } from '../PartRendererMenu/PartRendererMenu';
-import { PRODUCT_HEADER_HEIGHT } from '@/components/atoms/GuideMenu/GuideMenu';
 import { SITE_HEADER_HEIGHT } from '../SiteHeader/SiteHeader';
 import CodeBlockPart from '../CodeBlockPart/CodeBlockPart';
 import { ReactElement } from 'react';
+import { PRODUCT_HEADER_HEIGHT } from '@/components/atoms/ProductHeader/ProductHeader';
 
 type BlocksRendererClientProps = {
   content?: BlocksContent;

diff --git a/apps/nextjs-website/src/components/molecules/CkEditorPart/CkEditorPart.tsx b/apps/nextjs-website/src/components/molecules/CkEditorPart/CkEditorPart.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { Box, useTheme } from '@mui/material';
 import { SITE_HEADER_HEIGHT } from '@/components/molecules/SiteHeader/SiteHeader';
-import { PRODUCT_HEADER_HEIGHT } from '@/components/atoms/GuideMenu/GuideMenu';
+import { PRODUCT_HEADER_HEIGHT } from '@/components/atoms/ProductHeader/ProductHeader';
 
 export type CkEditorMenuItem = {
   title: string;

diff --git a/apps/nextjs-website/src/components/molecules/SiteHeader/SiteHeader.tsx b/apps/nextjs-website/src/components/molecules/SiteHeader/SiteHeader.tsx
@@ -21,11 +21,6 @@ const SiteHeader = (
   const { palette } = useTheme();
   const t = useTranslations('devPortal');
 
-  const dropdownItems = products.map((product) => ({
-    href: product.subpaths.overview.path,
-    label: product.name,
-  }));
-
   return (
     <Box
       sx={{

diff --git a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Heading.tsx b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Heading.tsx
@@ -2,7 +2,7 @@ import Typography from '@mui/material/Typography';
 import { HeadingProps } from 'gitbook-docs/markdoc/schema/heading';
 import { ReactNode } from 'react';
 import { SITE_HEADER_HEIGHT } from '@/components/molecules/SiteHeader/SiteHeader';
-import { PRODUCT_HEADER_HEIGHT } from '@/components/atoms/GuideMenu/GuideMenu';
+import { PRODUCT_HEADER_HEIGHT } from '@/components/atoms/ProductHeader/ProductHeader';
 
 const asVariant = (level: number) => {
   switch (level) {

diff --git a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
@@ -67,7 +67,7 @@ const GitBookTemplate = ({
             },
           }}
         >
-          <Box sx={{ paddingX: '40px' }}>
+          <Box sx={{ paddingTop: '60px', paddingX: '40px' }}>
             <ProductBreadcrumbs breadcrumbs={breadcrumbs} />
           </Box>
           <Box sx={{ padding: '32px 40px' }}>

diff --git a/apps/nextjs-website/src/editorialComponents/Header/components/MenuDropdown.tsx b/apps/nextjs-website/src/editorialComponents/Header/components/MenuDropdown.tsx
@@ -99,8 +99,21 @@ export const MenuDropdown = (props: MenuDropdownProp) => {
 
   return (
     <Stack sx={styles.menu} {...menuEventsHandlers}>
-      <Link sx={styles.item} {...button}>
-        <Typography variant='sidenav' color='inherit'>
+      <Link
+        sx={{ maxHeight: '27px', maxWidth: '130px', ...styles.item }}
+        {...button}
+      >
+        <Typography
+          noWrap
+          variant='sidenav'
+          color='inherit'
+          sx={{
+            paddingTop: '2px',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            display: 'inline-block',
+          }}
+        >
           {label}
         </Typography>
         {hasLinks && (