Fix solutions menu not totally visible (#722)

* Fix solutions menu not totally visible on mobile while improving the menu styles and transition also on mobile * Make ecosystem and success stories menus visible on mobile --------- Co-authored-by: Breno <breno@estuary.dev>
estuary · Mar 3, 2025 · 18fae76 · 18fae76
1 parent f2f0b3d
commit 18fae76
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 67 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import { Link } from 'gatsby';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Slide, useMediaQuery } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
 import ColoredLogo from '../../svgs/colored-logo.svg';
 import GithubIcon from '../../svgs/github-outline.svg';
 import SlackIcon from '../../svgs/slack-outline.svg';
@@ -26,7 +28,6 @@ import {
     globalHeaderFixed,
     headerBar,
     globalHeaderLinkWrapper,
-    isOpen,
     globalHeaderLoginTry,
     globalHeaderTryItButton,
     headerSocialIcons,
@@ -35,25 +36,14 @@ import {
     headerSocialIcon,
 } from './styles.module.less';
 
-const MenuBarsImage = () => (
-    <svg
-        width="20"
-        height="12"
-        viewBox="0 0 20 12"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z"
-            fill="white"
-        />
-    </svg>
-);
+const slideTimeout = 300;
 
 const Header = () => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const [activeMenu, setActiveMenu] = useState<string | null>(null);
 
+    const isMobile = useMediaQuery('(max-width:1142px)');
+
     const wrapperRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
@@ -72,6 +62,30 @@ const Header = () => {
         };
     }, [wrapperRef]);
 
+    useEffect(() => {
+        if (mobileMenuOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [mobileMenuOpen]);
+
+    const menuContent = useMemo(
+        () => (
+            <div className={globalHeaderLinkWrapper}>
+                <HeaderNavbar
+                    activeMenu={activeMenu}
+                    setActiveMenu={setActiveMenu}
+                />
+            </div>
+        ),
+        [activeMenu, setActiveMenu]
+    );
+
     return (
         <>
             <HeaderNavBarBackground
@@ -90,17 +104,20 @@ const Header = () => {
                         <strong className={globalHeaderTitle}>Estuary</strong>
                     </Link>
                     <div className={globalHeaderWrapper}>
-                        <div
-                            className={clsx(
-                                globalHeaderLinkWrapper,
-                                Boolean(mobileMenuOpen || activeMenu) && isOpen
-                            )}
-                        >
-                            <HeaderNavbar
-                                activeMenu={activeMenu}
-                                setActiveMenu={setActiveMenu}
-                            />
-                        </div>
+                        {isMobile ? (
+                            <Slide
+                                direction="left"
+                                in={mobileMenuOpen || !!activeMenu}
+                                timeout={{
+                                    enter: slideTimeout,
+                                    exit: slideTimeout,
+                                }}
+                            >
+                                {menuContent}
+                            </Slide>
+                        ) : (
+                            menuContent
+                        )}
                         <div className={headerSocialIcons}>
                             <OutboundLink
                                 target="_blank"
@@ -143,7 +160,7 @@ const Header = () => {
                             className={globalHeaderMobileMenuButton}
                             title="Navigation Menu"
                         >
-                            <MenuBarsImage />
+                            <MenuIcon htmlColor="var(--white)" />
                         </button>
                     </div>
                 </div>

diff --git a/src/components/Header/styles.module.less b/src/components/Header/styles.module.less
@@ -6,6 +6,7 @@
 
   position: relative;
   display: flex;
+  justify-content: space-between;
   flex-direction: row;
   width: 100%;
   height: 80px;
@@ -55,18 +56,13 @@
   @media (max-width: @menuTransitionMaxWidthBreakpoint) {
     .globalMaxWidth;
 
-    display: none;
     position: absolute;
     top: 80px;
     left: 0;
     right: 0;
     background-color: var(--dark-blue);
-  }
-}
-
-.isOpen {
-  @media (max-width: @menuTransitionMaxWidthBreakpoint) {
-    display: flex;
+    height: calc(100vh - 80px);
+    overflow: auto;
   }
 }
 
@@ -131,6 +127,10 @@
   padding-right: 6px;
   padding-left: 6px;
   padding-bottom: 4px;
+
+  svg {
+    margin-top: 4px;
+  }
 }
 
 .headerSocialIcon {
@@ -145,12 +145,12 @@
   padding: 10px;
 
   &:hover {
-      @media (min-width: @menuTransitionMinWidthBreakpoint) {
-          background-color: var(--header-link-hover);
-      }
+    @media (min-width: @menuTransitionMinWidthBreakpoint) {
+      background-color: var(--header-link-hover);
+    }
   }
 
   @media (max-width: @menuTransitionMaxWidthBreakpoint) {
     display: none;
   }
-}
+}
diff --git a/src/components/HeaderNavbar/Card/styles.module.less b/src/components/HeaderNavbar/Card/styles.module.less
@@ -38,15 +38,6 @@
     padding-bottom: 24px;
     background-color: var(--dark-blue);
 
-    @media (max-height: 880px) {
-        overflow: auto;
-        max-height: 85vh;
-    }
-
-    @media (max-height: 425px) {
-        max-height: 60vh;
-    }
-
     @media (max-width: @menuTransitionMaxWidthBreakpoint) {
         grid-template-columns: 1fr 1fr;
         padding: 0 20px;

diff --git a/src/components/HeaderNavbar/CardItem/styles.module.less b/src/components/HeaderNavbar/CardItem/styles.module.less
@@ -93,7 +93,6 @@
   line-height: 19.2px;
   margin: 0 0 16px 0;
   font-weight: 600;
-  text-transform: uppercase;
 
   @media (max-width: @menuTransitionMaxWidthBreakpoint) {
     font-size: 0.875rem;

diff --git a/src/components/HeaderNavbar/Product/items.tsx b/src/components/HeaderNavbar/Product/items.tsx
@@ -8,20 +8,20 @@ const BalanceHeaderIcon = () => <BalanceIcon width={15} height={15} />;
 
 export const products: MenuCardItem[] = [
     {
-        name: 'ESTUARY FLOW',
+        name: 'Estuary Flow',
         to: '/product',
         description: 'Build fully managed real-time data pipelines in minutes.',
         Image: () => <BookHeaderIcon />,
     },
     {
-        name: 'DEPLOYMENT OPTIONS',
+        name: 'Deployment Options',
         to: '/deployment-options',
         description:
             'Explore the deployment options for Estuary Flow: Public, Private, and BYOC, with a comparison.',
         Image: () => <BookHeaderIcon />,
     },
     {
-        name: 'SECURITY',
+        name: 'Security',
         to: '/security',
         description:
             'Learn more about seamless data security with Estuary Flow.',

diff --git a/src/components/HeaderNavbar/Resources/index.tsx b/src/components/HeaderNavbar/Resources/index.tsx
@@ -6,7 +6,6 @@ import {
 } from '@mui/material';
 import { StaticImage } from 'gatsby-plugin-image';
 import { graphql, useStaticQuery } from 'gatsby';
-import clsx from 'clsx';
 import { webinarsUrl } from '../../../../shared';
 import Card from '../Card';
 import CardItem from '../CardItem';
@@ -93,7 +92,7 @@ const HeaderNavbarResources = ({ active, setActive }) => {
     );
 
     const successStoryItems = orderedAllSuccessStories.map((successStory) => ({
-        name: successStory.Title.toUpperCase(),
+        name: successStory.Title,
         to: `/success-stories/${successStory.Slug}`,
         description: successStory.LinkOneLiner,
         Image: () => <SuccessIcon width={iconSize} height={iconSize} />,
@@ -111,17 +110,11 @@ const HeaderNavbarResources = ({ active, setActive }) => {
             <AccordionDetails className={accordionDetails}>
                 <Card>
                     <div className={columnWithTwoRows}>
+                        <CardItem title="ECOSYSTEM" items={partners} />
                         <CardItem
-                            className={hideOnMobile}
-                            title="ECOSYSTEM"
-                            items={partners}
-                            onlyContent
-                        />
-                        <CardItem
-                            className={clsx(hideOnMobile, longLinkList)}
+                            className={longLinkList}
                             title="SUCCESS STORIES"
                             items={successStoryItems}
-                            onlyContent
                             active={active}
                             contentFooterLink={
                                 <HeaderViewAllLink
@@ -135,11 +128,10 @@ const HeaderNavbarResources = ({ active, setActive }) => {
                         <CardItem
                             title="READ"
                             items={read}
-                            onlyContent
                             hasSeeMoreButton
                             maxNumberOfLinks={5}
                         />
-                        <CardItem title="LISTEN" items={listen} onlyContent />
+                        <CardItem title="LISTEN" items={listen} />
                     </div>
                     <CardItem className={hideOnMobile} title="DEMO" onlyContent>
                         <Carousel aria-label="Demos carousel" hasFullWidthSlide>

diff --git a/src/components/HeaderNavbar/Resources/items.tsx b/src/components/HeaderNavbar/Resources/items.tsx
@@ -82,7 +82,7 @@ export const demo: MenuCardItem[] = [
 
 export const partners: MenuCardItem[] = [
     {
-        name: 'PARTNERS',
+        name: 'Partners',
         to: '/partners/',
         description: 'Browse our directory of partners',
         Image: () => (

diff --git a/src/components/HeaderNavbar/shared.ts b/src/components/HeaderNavbar/shared.ts
@@ -6,7 +6,10 @@ export const accordionStyles = {
         display: 'none !important',
     },
     '&.MuiAccordion-root': {
-        margin: 'auto 0 !important',
+        'margin': 'auto 0 !important',
+        '@media (max-width: 1142px)': {
+            margin: '0 !important',
+        },
     },
 };
 

diff --git a/src/components/HeaderNavbar/styles.module.less b/src/components/HeaderNavbar/styles.module.less
@@ -18,6 +18,7 @@
     padding: 0 0 24px 0px;
     gap: 0;
     width: 100%;
+    height: fit-content;
   }
 }
 
@@ -89,4 +90,4 @@
   flex-direction: column;
   gap: 24px;
   margin: 0;
-}
+}