Fix broken side navs on uptime/apm/ux/synthetics

- because of their new custom xxl/xxxl breakpoints, the `isLargerBreakpoint` logic was broken on the shared solution nav. switching to a min breakpoint bound fixes the issue and futureproofs the solution nav for all apps that add larger breakpoints than xl
elastic · Sep 14, 2022 · cf858f1 · cf858f1
1 parent 8c115b1
commit cf858f1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
@@ -22,6 +22,7 @@ import {
   EuiTitle,
   htmlIdGenerator,
   useIsWithinBreakpoints,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -100,7 +101,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
 }) => {
   const isSmallerBreakpoint = useIsWithinBreakpoints(mobileBreakpoints);
   const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
-  const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+  const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
 
   // This is used for both the `EuiSideNav` and `EuiFlyout` toggling
   const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);

diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
@@ -8,7 +8,12 @@
 
 import React, { ComponentType, ReactNode, useState } from 'react';
 import classNames from 'classnames';
-import { useIsWithinBreakpoints, useEuiTheme, EuiPageSidebarProps } from '@elastic/eui';
+import {
+  useIsWithinBreakpoints,
+  useEuiTheme,
+  useIsWithinMinBreakpoint,
+  EuiPageSidebarProps,
+} from '@elastic/eui';
 import { SolutionNav, SolutionNavProps } from './solution_nav';
 
 import './with_solution_nav.scss';
@@ -35,7 +40,7 @@ const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed';
 export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: ComponentType<P>) => {
   const WithSolutionNav = (props: Props<P>) => {
     const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
-    const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+    const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
     const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(
       !JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY)))
     );

diff --git a/...n/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx b/...n/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx
@@ -20,7 +20,7 @@ import {
   EuiTitle,
   EuiWindowEvent,
   keys,
-  useIsWithinBreakpoints,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import classNames from 'classnames';
 import { EuiPanelStyled, FlexLink } from './solution_grouped_nav_panel.styles';
@@ -57,7 +57,7 @@ const SolutionNavPanelComponent: React.FC<SolutionNavPanelProps> = ({
   items,
   bottomOffset,
 }) => {
-  const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+  const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
   const panelClasses = classNames('eui-yScroll');
 
   // Only larger breakpoint needs to add bottom offset, other sizes should have full height