diff --git a/changelogs/fragments/7962.yml b/changelogs/fragments/7962.yml new file mode 100644 index 000000000000..ba9432b572e7 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap index 11b66bd6d5ae..b3a010659c21 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap @@ -11,8 +11,8 @@ exports[` should render correctly 1`] = ` class="eui-fullHeight left-navigation-wrapper" >
, } } - className="euiHeaderSectionItemButton newAppTopNavExpander" + className="euiHeaderSectionItemButton newAppTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" color="text" data-test-subj="toggleNavButton" onClick={[Function]} @@ -8568,7 +8569,7 @@ exports[`Header renders application header without title and breadcrumbs 1`] = ` aria-expanded={false} aria-label="Toggle primary navigation" aria-pressed={false} - className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton newAppTopNavExpander" + className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton newAppTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" data-test-subj="toggleNavButton" disabled={false} onClick={[Function]} @@ -8612,6 +8613,137 @@ exports[`Header renders application header without title and breadcrumbs 1`] = ` + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton newAppTopNavExpander navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l" + color="text" + data-test-subj="toggleNavButton" + flush="both" + isSmallScreen={true} + onClick={[Function]} + > + + + + + + + + + @@ -16913,7 +17046,7 @@ exports[`Header renders page header with application title 1`] = ` aria-expanded={false} aria-label="Toggle primary navigation" aria-pressed={false} - className="newPageTopNavExpander" + className="newPageTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" data-test-subj="toggleNavButton" onClick={[Function]} > @@ -16929,7 +17062,7 @@ exports[`Header renders page header with application title 1`] = ` aria-expanded="false" aria-label="Toggle primary navigation" aria-pressed="false" - class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton newPageTopNavExpander" + class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton newPageTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" data-test-subj="toggleNavButton" type="button" > @@ -16952,7 +17085,7 @@ exports[`Header renders page header with application title 1`] = ` , } } - className="euiHeaderSectionItemButton newPageTopNavExpander" + className="euiHeaderSectionItemButton newPageTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" color="text" data-test-subj="toggleNavButton" onClick={[Function]} @@ -16962,7 +17095,7 @@ exports[`Header renders page header with application title 1`] = ` aria-expanded={false} aria-label="Toggle primary navigation" aria-pressed={false} - className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton newPageTopNavExpander" + className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton newPageTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" data-test-subj="toggleNavButton" disabled={false} onClick={[Function]} @@ -17006,6 +17139,137 @@ exports[`Header renders page header with application title 1`] = ` + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton newPageTopNavExpander navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l" + color="text" + data-test-subj="toggleNavButton" + flush="both" + isSmallScreen={true} + onClick={[Function]} + > + + + + + + + + + @@ -21241,6 +21505,7 @@ exports[`Header toggles primary navigation menu when clicked 1`] = ` aria-expanded={true} aria-label="Toggle primary navigation" aria-pressed={true} + className="" data-test-subj="toggleNavButton" onClick={[Function]} > diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss index 978ed743a24b..27537d9af8eb 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss +++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss @@ -82,4 +82,8 @@ padding-bottom: $euiSize; } } + + .navGroupEnabledNavTopWrapper { + padding: 0 $euiSizeL; + } } 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 index 9b64995b1824..5908d78a6de9 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx +++ b/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) => (
{!isNavOpen ? null : ( ); + + return ( + <> + {rendeLeftNav()} + + {isNavOpen + ? rendeLeftNav({ + type: 'overlay', + size: undefined, + outsideClickCloses: true, + paddingSize: undefined, + ownFocus: true, + }) + : null} + + + ); } diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx index 39e985d870ef..3d1535992a3f 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx @@ -123,7 +123,7 @@ export const CollapsibleNavTop = ({ ); return ( - + {!shouldShrinkNavigation ? ( diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss index 0376e675be88..59a7c4adcacf 100644 --- a/src/core/public/chrome/ui/header/header.scss +++ b/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 { diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 23c782e4b050..72d9ba6be3fc 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/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 = () => ( - setIsNavOpen(!isNavOpen)} - aria-expanded={isNavOpen} - aria-pressed={isNavOpen} - aria-controls={navId} - ref={toggleCollapsibleNavRef} - className={ - useUpdatedHeader - ? useApplicationHeader - ? 'newAppTopNavExpander' - : 'newPageTopNavExpander' - : undefined - } - > - { + const renderNavToggleWithExtraProps = ( + props: EuiHeaderSectionItemButtonProps & { isSmallScreen?: boolean } + ) => ( + - - ); + 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 ? ( + + ) : ( + + )} + + ); + 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 = () => (
- {isNavOpen ? null : renderNavToggle()} + {renderNavToggle()} {renderRecentItems()} @@ -445,7 +482,7 @@ export function Header({ const renderApplicationHeader = () => (
- {isNavOpen ? null : renderNavToggle()} + {renderNavToggle()} {renderRecentItems()} {renderActionMenu()}