cleanup

linode · Jan 8, 2025 · 4748e81 · 4748e81
1 parent b601e41
commit 4748e81
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 45 deletions.
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
@@ -14,13 +14,13 @@ import { SideMenu } from 'src/components/PrimaryNav/SideMenu';
 import { useIsPageScrollable } from 'src/components/PrimaryNav/utils';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { useDialogContext } from 'src/context/useDialogContext';
-import { Footer } from 'src/features/Footer';
+import { FOOTER_HEIGHT, Footer } from 'src/features/Footer';
 import { GlobalNotifications } from 'src/features/GlobalNotifications/GlobalNotifications';
 import {
   notificationCenterContext,
   useNotificationContext,
 } from 'src/features/NotificationCenter/NotificationCenterContext';
-import { TopMenu } from 'src/features/TopMenu/TopMenu';
+import { TOPMENU_HEIGHT, TopMenu } from 'src/features/TopMenu/TopMenu';
 import {
   useMutatePreferences,
   usePreferences,
@@ -296,6 +296,11 @@ export const MainContent = () => {
     });
   };
 
+  const sideMenuContainerHeight =
+    isPageScrollable === true
+      ? '100vh'
+      : `calc(100vh - ${FOOTER_HEIGHT + TOPMENU_HEIGHT}px)`;
+
   return (
     <div className={classes.appFrame}>
       <SessionExpirationProvider value={sessionExpirationContextValue}>
@@ -310,8 +315,8 @@ export const MainContent = () => {
               <Box display="flex" flex={1} position="relative">
                 <Box
                   alignSelf="flex-start"
-                  height={isPageScrollable ? '100vh' : 'auto'}
-                  position={isPageScrollable ? 'sticky' : 'static'}
+                  height={sideMenuContainerHeight}
+                  position="sticky"
                   top={0}
                   zIndex={10000}
                 >

diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
@@ -6,7 +6,6 @@ import { Link } from 'react-router-dom';
 
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/constants';
-import { FOOTER_HEIGHT } from 'src/features/Footer';
 
 export const StyledGrid = styled(Grid, {
   label: 'StyledGrid',
@@ -15,15 +14,13 @@ export const StyledGrid = styled(Grid, {
   margin: 0,
   minHeight: 64,
   padding: 0,
-  paddingBottom: FOOTER_HEIGHT,
   [theme.breakpoints.up('md')]: {
     '&:hover': {
       '.primary-nav-toggle': {
         left: SIDEBAR_WIDTH - 52,
       },
     },
   },
-
   width: '100%',
 }));
 
@@ -116,6 +113,7 @@ export const StyledPrimaryLinkBox = styled(Box, {
 export const StyledMenuGrid = styled(Grid, {
   label: 'StyledMenuGrid',
 })(({ theme }) => ({
+  flexGrow: 1,
   overflowX: 'hidden',
   overflowY: 'auto',
   scrollbarColor: `${theme.color.grey4} transparent `,

diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx
@@ -1,13 +1,12 @@
 import { Box, IconButton, Tooltip } from '@linode/ui';
-import { Hidden, styled } from '@mui/material';
+import { Hidden, styled, useScrollTrigger } from '@mui/material';
 import React from 'react';
 
 import PinFilledIcon from 'src/assets/icons/pin-filled.svg';
 import PinOutlineIcon from 'src/assets/icons/pin-outline.svg';
-import { FOOTER_HEIGHT } from 'src/features/Footer';
+import { TOPMENU_HEIGHT } from 'src/features/TopMenu/TopMenu';
 
 import { SIDEBAR_WIDTH } from './constants';
-import { useIsWindowAtBottom } from './utils';
 
 interface PrimaryNavToggleProps {
   desktopMenuToggle: () => void;
@@ -18,22 +17,26 @@ interface PrimaryNavToggleProps {
 export const PrimaryNavToggle = (props: PrimaryNavToggleProps) => {
   const { desktopMenuToggle, isCollapsed, isPageScrollable } = props;
 
-  const { isAtBottom } = useIsWindowAtBottom();
+  const hasScrolledPastTopMenu = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: TOPMENU_HEIGHT,
+  });
 
   return (
     <Hidden mdDown>
       <Box
+        position={
+          isPageScrollable && !hasScrolledPastTopMenu ? 'fixed' : 'relative'
+        }
         sx={{
-          bottom:
-            isPageScrollable === false || isAtBottom === true
-              ? FOOTER_HEIGHT
-              : 0,
-          left: isCollapsed ? 0 : SIDEBAR_WIDTH - 52,
-          padding: 1,
-          position: 'fixed',
-          transition: 'bottom 150ms linear, left 100ms linear',
+          transition: 'left 100ms ease-in-out',
         }}
+        bottom={isPageScrollable && !hasScrolledPastTopMenu ? 0 : 'auto'}
         className="primary-nav-toggle"
+        display="flex"
+        justifyContent="flex-end"
+        left={isCollapsed ? 0 : SIDEBAR_WIDTH - 52}
+        padding={1}
       >
         <Tooltip
           PopperProps={{
@@ -47,6 +50,9 @@ export const PrimaryNavToggle = (props: PrimaryNavToggleProps) => {
           title={isCollapsed ? 'pin side menu' : 'unpin side menu'}
         >
           <StyledIconButton
+            sx={{
+              left: 1,
+            }}
             aria-label="unpin menu"
             data-testid="unpin-nav-menu"
             onClick={desktopMenuToggle}

diff --git a/packages/manager/src/components/PrimaryNav/utils.ts b/packages/manager/src/components/PrimaryNav/utils.ts
@@ -1,7 +1,5 @@
-import { useScrollTrigger } from '@mui/material';
 import React from 'react';
 
-import { FOOTER_HEIGHT } from 'src/features/Footer';
 import { isPathOneOf } from 'src/utilities/routing/isPathOneOf';
 
 export const linkIsActive = (
@@ -31,7 +29,7 @@ export const linkIsActive = (
 export const useIsPageScrollable = (
   contentRef: React.RefObject<HTMLElement>
 ): { isPageScrollable: boolean } => {
-  const [isPageScrollable, setIsPageScrollable] = React.useState(true);
+  const [isPageScrollable, setIsPageScrollable] = React.useState(false);
 
   React.useEffect(() => {
     const observer = new MutationObserver(() => {
@@ -58,20 +56,3 @@ export const useIsPageScrollable = (
 
   return { isPageScrollable };
 };
-
-/**
- * This hook is used to determine if the window is at the bottom of the page.
- * It is used to adjust the position of the pin menu button with the footer.
- */
-export const useIsWindowAtBottom = () => {
-  const isAtBottom = useScrollTrigger({
-    disableHysteresis: true,
-    target: window,
-    threshold:
-      document.documentElement.scrollHeight -
-      window.innerHeight -
-      FOOTER_HEIGHT,
-  });
-
-  return { isAtBottom };
-};
diff --git a/packages/manager/src/features/Footer.tsx b/packages/manager/src/features/Footer.tsx
@@ -23,16 +23,16 @@ export const Footer = React.memo(() => {
       <Stack
         sx={(theme) => ({
           backgroundColor: theme.tokens.footer.Background,
-          height: FOOTER_HEIGHT,
-          paddingX: theme.spacing(4),
-          paddingY: theme.spacing(1.5),
-          textAlign: 'center',
         })}
         alignItems="center"
         direction="row"
         display="flex"
-        justifyContent="center"
+        height={FOOTER_HEIGHT}
+        justifyContent="space-between"
+        paddingX={{ md: 4, xs: 2 }}
+        paddingY={1.5}
         spacing={{ xs: 1 }}
+        textAlign="center"
       >
         <Hidden mdDown>
           <Stack direction="row" spacing={3}>
@@ -41,6 +41,8 @@ export const Footer = React.memo(() => {
             >
               v{packageJson.version}
             </StyledLink>
+          </Stack>
+          <Stack direction="row" spacing={3}>
             <StyledLink to={DEVELOPERS_LINK}>API Reference</StyledLink>
             <StyledLink to={FEEDBACK_LINK}>Provide Feedback</StyledLink>
             <Typography
@@ -59,11 +61,13 @@ export const Footer = React.memo(() => {
             >
               v{packageJson.version}
             </StyledLink>
+          </Stack>
+          <Stack direction="row" spacing={1}>
             <Typography
               sx={(theme) => ({ color: theme.tokens.footer.Text.Default })}
               variant="body1"
             >
-              ©{new Date().getFullYear()} Akamai
+              ©{new Date().getFullYear()} Akamai Technologies, Inc.
             </Typography>
           </Stack>
         </Hidden>