[navigation]fix: add xxl and xxxl for left nav responsiveness (#8289)

* fix: add xxl and xxxl Signed-off-by: SuZhou-Joe <[email protected]> * feat: update Signed-off-by: SuZhou-Joe <[email protected]> * feat: update snapshot Signed-off-by: SuZhou-Joe <[email protected]> --------- Signed-off-by: SuZhou-Joe <[email protected]>
opensearch-project · Sep 24, 2024 · 6fd284f · 6fd284f
1 parent 9fd0f0b
commit 6fd284f
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
@@ -282,7 +282,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,
         })}
       </>