[navigation]fix: add xxl and xxxl for left nav responsiveness (opense…

…arch-project#8289) (opensearch-project#8319) * fix: add xxl and xxxl * feat: update * feat: update snapshot --------- (cherry picked from commit 6fd284f) Signed-off-by: SuZhou-Joe <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
yubonluo · Sep 25, 2024 · 4cae56a · 4cae56a
1 parent 4d2eb7c
commit 4cae56a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -11,6 +11,7 @@ import {
   EuiSpacer,
   EuiHideFor,
   EuiFlyoutProps,
+  EuiShowFor,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useMemo } from 'react';
@@ -368,7 +369,7 @@ export function CollapsibleNavGroupEnabled({
   return (
     <>
       <EuiHideFor sizes={['xs', 's', 'm']}>{rendeLeftNav()}</EuiHideFor>
-      <EuiHideFor sizes={['xl', 'l']}>
+      <EuiShowFor sizes={['xs', 's', 'm']}>
         {isNavOpen
           ? rendeLeftNav({
               type: 'overlay',
@@ -378,7 +379,7 @@ export function CollapsibleNavGroupEnabled({
               ownFocus: true,
             })
           : null}
-      </EuiHideFor>
+      </EuiShowFor>
     </>
   );
 }
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -272,7 +272,8 @@ export function Header({
             })}
         {renderNavToggleWithExtraProps({
           flush: 'both',
-          className: 'navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l',
+          className:
+            'navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l eui-hideFor--xxl eui-hideFor--xxxl',
           isSmallScreen: true,
         })}
       </>