[navigation]feat: fix left nav in small screen (#7962) (#8092)

* feat: fix left nav in small screen



* Changeset file for PR #7962 created/updated

* fix: snapshot update



* feat: optimize style



* fix: update snapshot



* feat: show left nav in small screen



* feat: update snapshot



* feat: use css to hide



* fix: cypress test



* feat: update



---------



(cherry picked from commit dc62362)

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>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/7962.yml

@@ -0,0 +1,2 @@
+fix:
+- Make left nav compatible with small screen. ([#7962](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7962))

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss

@@ -82,4 +82,8 @@
       padding-bottom: $euiSize;
     }
   }
+
+  .navGroupEnabledNavTopWrapper {
+    padding: 0 $euiSizeL;
+  }
 }

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx

@@ -4,7 +4,14 @@
  */
 
 import './collapsible_nav_group_enabled.scss';
-import { EuiFlyout, EuiPanel, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlyout,
+  EuiPanel,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiHideFor,
+  EuiFlyoutProps,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -266,7 +273,7 @@ export function CollapsibleNavGroupEnabled({
     }
   };
 
-  return (
+  const rendeLeftNav = (props?: Partial<EuiFlyoutProps>) => (
     <EuiFlyout
       data-test-subj="collapsibleNav"
       id={id}
@@ -283,15 +290,16 @@ export function CollapsibleNavGroupEnabled({
       hideCloseButton
       paddingSize="none"
       ownFocus={false}
+      {...props}
     >
       <div className="eui-fullHeight left-navigation-wrapper">
         {!isNavOpen ? null : (
           <EuiPanel
             hasBorder={false}
             borderRadius="none"
-            paddingSize={!isNavOpen ? 's' : 'l'}
+            paddingSize="s"
             hasShadow={false}
-            style={{ flexGrow: 0, paddingBottom: 0 }}
+            style={{ flexGrow: 0 }}
           >
             <CollapsibleNavTop
               homeLink={homeLink}
@@ -356,4 +364,21 @@ export function CollapsibleNavGroupEnabled({
       </div>
     </EuiFlyout>
   );
+
+  return (
+    <>
+      <EuiHideFor sizes={['xs', 's', 'm']}>{rendeLeftNav()}</EuiHideFor>
+      <EuiHideFor sizes={['xl', 'l']}>
+        {isNavOpen
+          ? rendeLeftNav({
+              type: 'overlay',
+              size: undefined,
+              outsideClickCloses: true,
+              paddingSize: undefined,
+              ownFocus: true,
+            })
+          : null}
+      </EuiHideFor>
+    </>
+  );
 }

src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx

@@ -123,7 +123,7 @@ export const CollapsibleNavTop = ({
   );
 
   return (
-    <EuiPanel hasBorder={false} hasShadow={false}>
+    <EuiPanel hasBorder={false} hasShadow={false} className="navGroupEnabledNavTopWrapper">
       <EuiFlexGroup responsive={false} alignItems="center" justifyContent="spaceBetween">
         {!shouldShrinkNavigation ? (
           <EuiFlexItem grow={false}>

src/core/public/chrome/ui/header/header.scss

@@ -89,16 +89,18 @@
   }
 }
 
-.newAppTopNavExpander {
+.navToggleInLargeScreen {
   position: fixed;
   left: 0;
-  top: $euiSize;
+  top: 0;
 }
 
-.newPageTopNavExpander {
-  position: fixed;
-  left: 0;
-  top: $euiSize;
+.navToggleInSmallScreen {
+  // Make the toggle button align with content
+  min-width: unset;
+
+  // Make the icon align with recent icon
+  height: $euiSizeXL;
 }
 
 .stretchedActionMenu {

src/core/public/chrome/ui/header/header.tsx

@@ -28,11 +28,13 @@
  * under the License.
  */
 import {
+  EuiButtonIcon,
   EuiHeader,
   EuiHeaderProps,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,
+  EuiHeaderSectionItemButtonProps,
   EuiHideFor,
   EuiIcon,
   EuiShowFor,
@@ -215,34 +217,69 @@ export function Header({
     />
   );
 
-  const renderNavToggle = () => (
-    <EuiHeaderSectionItemButton
-      data-test-subj="toggleNavButton"
-      aria-label={i18n.translate('core.ui.primaryNav.toggleNavAriaLabel', {
-        defaultMessage: 'Toggle primary navigation',
-      })}
-      onClick={() => setIsNavOpen(!isNavOpen)}
-      aria-expanded={isNavOpen}
-      aria-pressed={isNavOpen}
-      aria-controls={navId}
-      ref={toggleCollapsibleNavRef}
-      className={
-        useUpdatedHeader
-          ? useApplicationHeader
-            ? 'newAppTopNavExpander'
-            : 'newPageTopNavExpander'
-          : undefined
-      }
-    >
-      <EuiIcon
-        type="menu"
-        size="m"
-        title={i18n.translate('core.ui.primaryNav.menu', {
-          defaultMessage: 'Menu',
+  const renderNavToggle = () => {
+    const renderNavToggleWithExtraProps = (
+      props: EuiHeaderSectionItemButtonProps & { isSmallScreen?: boolean }
+    ) => (
+      <EuiHeaderSectionItemButton
+        data-test-subj="toggleNavButton"
+        aria-label={i18n.translate('core.ui.primaryNav.toggleNavAriaLabel', {
+          defaultMessage: 'Toggle primary navigation',
         })}
-      />
-    </EuiHeaderSectionItemButton>
-  );
+        onClick={() => setIsNavOpen(!isNavOpen)}
+        aria-expanded={isNavOpen}
+        aria-pressed={isNavOpen}
+        aria-controls={navId}
+        ref={toggleCollapsibleNavRef}
+        {...props}
+        className={classnames(
+          useUpdatedHeader
+            ? useApplicationHeader
+              ? 'newAppTopNavExpander'
+              : 'newPageTopNavExpander'
+            : undefined,
+          props.className
+        )}
+      >
+        {props.isSmallScreen ? (
+          <EuiButtonIcon
+            iconType="menu"
+            size="xs"
+            title={i18n.translate('core.ui.primaryNav.menu', {
+              defaultMessage: 'Menu',
+            })}
+            display="base"
+            color="subdued"
+            iconSize="s"
+          />
+        ) : (
+          <EuiIcon
+            type="menu"
+            size="m"
+            title={i18n.translate('core.ui.primaryNav.menu', {
+              defaultMessage: 'Menu',
+            })}
+          />
+        )}
+      </EuiHeaderSectionItemButton>
+    );
+    return useUpdatedHeader ? (
+      <>
+        {isNavOpen
+          ? null
+          : renderNavToggleWithExtraProps({
+              className: 'navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m',
+            })}
+        {renderNavToggleWithExtraProps({
+          flush: 'both',
+          className: 'navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l',
+          isSmallScreen: true,
+        })}
+      </>
+    ) : (
+      renderNavToggleWithExtraProps({})
+    );
+  };
 
   const renderLeftControls = () => (
     <>
@@ -397,7 +434,7 @@ export function Header({
   const renderPageHeader = () => (
     <div>
       <EuiHeader className="primaryHeader newTopNavHeader" style={sidecarPaddingStyle}>
-        {isNavOpen ? null : renderNavToggle()}
+        {renderNavToggle()}
 
         <EuiHeaderSection grow={false}>{renderRecentItems()}</EuiHeaderSection>
 
@@ -445,7 +482,7 @@ export function Header({
   const renderApplicationHeader = () => (
     <div>
       <EuiHeader className="primaryApplicationHeader newTopNavHeader" style={sidecarPaddingStyle}>
-        {isNavOpen ? null : renderNavToggle()}
+        {renderNavToggle()}
         <EuiHeaderSection side="left" grow={true}>
           {renderRecentItems()}
           {renderActionMenu()}