fix: [M3-7298] - Improve Footer Styles

packages/manager/.changeset/pr-9823-fixed-1697820563300.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Footer styles on small viewports ([#9823](https://github.com/linode/manager/pull/9823))

packages/manager/src/MainContent.tsx

@@ -18,7 +18,7 @@ import withGlobalErrors, {
   Props as GlobalErrorProps,
 } from 'src/containers/globalErrors.container';
 import { useDialogContext } from 'src/context/useDialogContext';
-import { Footer } from 'src/features/Footer/Footer';
+import { Footer } from 'src/features/Footer';
 import { GlobalNotifications } from 'src/features/GlobalNotifications/GlobalNotifications';
 import {
   notificationContext,
@@ -155,7 +155,9 @@ const LoadBalancers = React.lazy(() => import('src/features/LoadBalancers'));
 const NodeBalancers = React.lazy(
   () => import('src/features/NodeBalancers/NodeBalancers')
 );
-const StackScripts = React.lazy(() => import('src/features/StackScripts/StackScripts'));
+const StackScripts = React.lazy(
+  () => import('src/features/StackScripts/StackScripts')
+);
 const SupportTickets = React.lazy(
   () => import('src/features/Support/SupportTickets')
 );

packages/manager/src/components/SideMenu.tsx

@@ -7,6 +7,7 @@ import { Hidden } from 'src/components/Hidden';
 import PrimaryNav from './PrimaryNav/PrimaryNav';
 
 export const SIDEBAR_WIDTH = 190;
+export const SIDEBAR_COLLAPSED_WIDTH = 52;
 
 export interface Props {
   closeMenu: () => void;
@@ -70,7 +71,7 @@ const StyledDrawer = styled(Drawer, {
         [theme.breakpoints.up('sm')]: {
           overflowY: 'hidden',
         },
-        width: '52px',
+        width: `${SIDEBAR_COLLAPSED_WIDTH}px`,
       },
       '&.MuiDrawer-docked': {
         height: '100%',

packages/manager/src/constants.ts

@@ -255,3 +255,7 @@ export const ACCESS_LEVELS = {
 
 // Linode Community URL accessible from the TopMenu Community icon
 export const LINODE_COMMUNITY_URL = 'https://linode.com/community';
+
+export const FEEDBACK_LINK = 'https://www.linode.com/feedback/';
+
+export const DEVELOPERS_LINK = 'https://developers.linode.com';

packages/manager/src/features/Footer.tsx

@@ -0,0 +1,53 @@
+import Stack from '@mui/material/Stack';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import {
+  SIDEBAR_COLLAPSED_WIDTH,
+  SIDEBAR_WIDTH,
+} from 'src/components/SideMenu';
+import { DEVELOPERS_LINK, FEEDBACK_LINK } from 'src/constants';
+
+import packageJson from '../../package.json';
+
+interface Props {
+  desktopMenuIsOpen: boolean;
+}
+
+export const Footer = React.memo((props: Props) => {
+  const { desktopMenuIsOpen } = props;
+
+  return (
+    <footer role="contentinfo">
+      <Stack
+        sx={(theme) => ({
+          backgroundColor: theme.bg.main,
+          paddingLeft: {
+            md: desktopMenuIsOpen
+              ? `${SIDEBAR_COLLAPSED_WIDTH + 16}px`
+              : `${SIDEBAR_WIDTH + 16}px`,
+            sm: 2,
+            xs: 2,
+          },
+          paddingY: theme.spacing(2.5),
+          transition: 'padding-left .1s linear', // match the sidebar transition speed
+        })}
+        direction={{ sm: 'row', xs: 'column' }}
+        spacing={{ sm: 4, xs: 1 }}
+      >
+        <Link
+          forceCopyColor
+          to={`https://github.com/linode/manager/releases/tag/linode-manager@v${packageJson.version}`}
+        >
+          v{packageJson.version}
+        </Link>
+        <Link forceCopyColor to={DEVELOPERS_LINK}>
+          API Reference
+        </Link>
+        <Link forceCopyColor to={FEEDBACK_LINK}>
+          Provide Feedback
+        </Link>
+      </Stack>
+    </footer>
+  );
+});