change: [M3-9003] – CDS: Restructure Top Menu Design with Akamai Logo and CDS Compass Updates

packages/manager/package.json

@@ -21,7 +21,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "3.9.1",
     "@linode/api-v4": "*",
-    "@linode/design-language-system": "^2.9.0",
+    "@linode/design-language-system": "^2.11.1",
     "@linode/search": "*",
     "@linode/ui": "*",
     "@linode/validation": "*",

packages/manager/src/MainContent.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@linode/ui';
+import { useMediaQuery } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
@@ -9,7 +10,10 @@ import { makeStyles } from 'tss-react/mui';
 import Logo from 'src/assets/logo/akamai-logo.svg';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
-import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/constants';
+import {
+  SIDEBAR_COLLAPSED_WIDTH,
+  SIDEBAR_WIDTH,
+} from 'src/components/PrimaryNav/constants';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { useDialogContext } from 'src/context/useDialogContext';
@@ -81,16 +85,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   content: {
     flex: 1,
-    [theme.breakpoints.up('md')]: {
-      marginLeft: SIDEBAR_WIDTH,
-    },
     transition: 'margin-left .1s linear',
   },
   fullWidthContent: {
     marginLeft: 0,
-    [theme.breakpoints.up('md')]: {
-      marginLeft: 52,
-    },
   },
   grid: {
     marginLeft: 0,
@@ -240,6 +238,10 @@ export const MainContent = () => {
 
   const { isIAMEnabled } = useIsIAMEnabled();
 
+  const isNarrowViewport = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(960)
+  );
+
   /**
    * this is the case where the user has successfully completed signup
    * but needs a manual review from Customer Support. In this case,
@@ -299,8 +301,9 @@ export const MainContent = () => {
         <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
           <ComplianceUpdateProvider value={complianceUpdateContextValue}>
             <NotificationProvider value={contextValue}>
+              <MainContentBanner />
               <TopMenu
-                isSideMenuOpen={!desktopMenuIsOpen}
+                desktopMenuToggle={desktopMenuToggle}
                 openSideMenu={() => toggleMenu(true)}
                 username={username}
               />
@@ -310,7 +313,7 @@ export const MainContent = () => {
                   height="100vh"
                   position="sticky"
                   top={0}
-                  zIndex={10000}
+                  zIndex={1400}
                 >
                   <SideMenu
                     closeMenu={() => toggleMenu(false)}
@@ -327,6 +330,19 @@ export const MainContent = () => {
                 >
                   <MainContentBanner />
                   <main
+                    /*
+                    - Narrow viewports (<960px) never have a left margin
+                    - If the user has unpinned the side menu, the left margin === the width of the collapsed side menu
+                    - Otherwise, the left margin === the width of the fully expanded side menu
+                    */
+                    style={{
+                      marginLeft: isNarrowViewport
+                        ? 0
+                        : desktopMenuIsOpen ||
+                          (desktopMenuIsOpen && desktopMenuIsOpen === true)
+                        ? SIDEBAR_COLLAPSED_WIDTH
+                        : SIDEBAR_WIDTH,
+                    }}
                     className={classes.cmrWrapper}
                     id="main-content"
                     role="main"

packages/manager/src/Root.tsx

@@ -90,23 +90,19 @@ export const Root = () => {
         <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
           <ComplianceUpdateProvider value={complianceUpdateContextValue}>
             <NotificationProvider value={contextValue}>
+              <MainContentBanner />
               <TopMenu
-                isSideMenuOpen={!desktopMenuIsOpen}
+                desktopMenuToggle={desktopMenuToggle}
                 openSideMenu={() => toggleMenu(true)}
                 username={username}
               />
-              <SideMenu
-                closeMenu={() => toggleMenu(false)}
-                collapse={desktopMenuIsOpen || false}
-                desktopMenuToggle={desktopMenuToggle}
-                open={menuIsOpen}
-              />
-              <div
-                className={cx(classes.content, {
-                  [classes.fullWidthContent]: desktopMenuIsOpen,
-                })}
-              >
-                <MainContentBanner />
+              <div className={classes.content}>
+                <SideMenu
+                  closeMenu={() => toggleMenu(false)}
+                  collapse={desktopMenuIsOpen || false}
+                  desktopMenuToggle={desktopMenuToggle}
+                  open={menuIsOpen}
+                />
                 <main
                   className={classes.cmrWrapper}
                   id="main-content"

packages/manager/src/components/Avatar/Avatar.tsx

@@ -61,7 +61,7 @@ export const Avatar = (props: AvatarProps) => {
 
   const savedAvatarColor =
     isAkamai || !avatarColorPreference
-      ? theme.palette.primary.dark
+      ? theme.tokens.color.Neutrals[30]
       : avatarColorPreference;
 
   const avatarLetter = _username[0]?.toUpperCase() ?? '';

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -24,36 +24,12 @@ export const StyledGrid = styled(Grid, {
   width: '100%',
 }));
 
-export const StyledLogoBox = styled(Box, {
-  label: 'StyledLogoBox',
-})(({ theme }) => ({
-  alignItems: 'center',
-  display: 'flex',
-  height: 50,
-  paddingBottom: 16,
-  paddingLeft: 12,
-  paddingRight: 24,
-  paddingTop: 16,
-  [theme.breakpoints.down('md')]: {
-    borderRight: `1px solid ${theme.tokens.border.Normal}`,
-  },
-  transition: 'padding-left .03s linear',
-}));
-
 export const StyledAkamaiLogo = styled(AkamaiLogo, {
   label: 'StyledAkamaiLogo',
 })(({ theme }) => ({
-  '& .akamai-logo-name': {
-    transition: theme.transitions.create(['opacity']),
-  },
   'path, polygon': {
     fill: theme.tokens.color.Neutrals.White,
-    [theme.breakpoints.down('md')]: {
-      fill: theme.tokens.sideNavigation.Icon,
-    },
   },
-  // give the svg a transition so it smoothly resizes
-  transition: 'width .1s linear',
 }));
 
 export const StyledDivider = styled(Divider, {

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -8,6 +8,7 @@ import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
 import PrimaryNav from './PrimaryNav';
 
 import type { Flags } from 'src/featureFlags';
+import type { ManagerPreferences } from 'src/types/ManagerPreferences';
 
 const props = {
   closeMenu: vi.fn(),
@@ -21,6 +22,20 @@ const queryClient = queryClientFactory();
 const queryString = 'menu-item-Managed';
 
 describe('PrimaryNav', () => {
+  const preference: ManagerPreferences['collapsedSideNavProductFamilies'] = [];
+
+  const queryMocks = vi.hoisted(() => ({
+    usePreferences: vi.fn().mockReturnValue({}),
+  }));
+
+  vi.mock('src/queries/profile/preferences', async () => {
+    const actual = await vi.importActual('src/queries/profile/preferences');
+    return {
+      ...actual,
+      usePreferences: queryMocks.usePreferences,
+    };
+  });
+
   it('only contains a "Managed" menu link if the user has Managed services.', async () => {
     server.use(
       http.get('*/account/maintenance', () => {
@@ -58,6 +73,10 @@ describe('PrimaryNav', () => {
   });
 
   it('should show Databases menu item if the user has the account capability V1', async () => {
+    queryMocks.usePreferences.mockReturnValue({
+      data: preference,
+    });
+
     const account = accountFactory.build({
       capabilities: ['Managed Databases'],
     });
@@ -89,6 +108,10 @@ describe('PrimaryNav', () => {
   });
 
   it('should show Databases menu item if the user has the account capability V2 Beta', async () => {
+    queryMocks.usePreferences.mockReturnValue({
+      data: preference,
+    });
+
     const account = accountFactory.build({
       capabilities: ['Managed Databases Beta'],
     });
@@ -118,6 +141,10 @@ describe('PrimaryNav', () => {
   });
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
+    queryMocks.usePreferences.mockReturnValue({
+      data: preference,
+    });
+
     const account = accountFactory.build({
       capabilities: ['Managed Databases'],
     });
@@ -149,6 +176,10 @@ describe('PrimaryNav', () => {
   });
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
+    queryMocks.usePreferences.mockReturnValue({
+      data: preference,
+    });
+
     const account = accountFactory.build({
       capabilities: ['Managed Databases Beta'],
     });