[APM] Settings: Move "HomeLink" into the sidebar (#87167)

* Fixed responsive state when opening the menu

* Update x-pack/plugins/apm/public/components/app/Settings/index.tsx

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
This commit is contained in:
Casper Hübertz 2021-01-05 13:19:13 +01:00 committed by GitHub
parent fb8a1ef505
commit fdea747fb3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -10,9 +10,10 @@ import {
EuiPageBody,
EuiPageSideBar,
EuiSideNav,
EuiSpacer,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { ReactNode } from 'react';
import React, { ReactNode, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { HeaderMenuPortal } from '../../../../../observability/public';
import { ActionMenu } from '../../../application/action_menu';
@ -30,6 +31,12 @@ export function Settings({ children, location }: SettingsProps) {
const canAccessML = !!core.application.capabilities.ml?.canAccessML;
const { search, pathname } = location;
const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
const toggleOpenOnMobile = () => {
setisSideNavOpenOnMobile((prevState) => !prevState);
};
function getSettingsHref(path: string) {
return getAPMHref({ basePath, path: `/settings${path}`, search });
}
@ -41,16 +48,24 @@ export function Settings({ children, location }: SettingsProps) {
>
<ActionMenu />
</HeaderMenuPortal>
<HomeLink>
<EuiButtonEmpty size="s" color="primary" iconType="arrowLeft">
{i18n.translate('xpack.apm.settings.returnLinkLabel', {
defaultMessage: 'Return to inventory',
})}
</EuiButtonEmpty>
</HomeLink>
<EuiPage>
<EuiPageSideBar>
<HomeLink>
<EuiButtonEmpty
flush="left"
size="s"
color="primary"
iconType="arrowLeft"
>
{i18n.translate('xpack.apm.settings.returnLinkLabel', {
defaultMessage: 'Return to inventory',
})}
</EuiButtonEmpty>
<EuiSpacer size="s" />
</HomeLink>
<EuiSideNav
toggleOpenOnMobile={() => toggleOpenOnMobile()}
isOpenOnMobile={isSideNavOpenOnMobile}
items={[
{
name: i18n.translate('xpack.apm.settings.pageTitle', {