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

…stic#87290) * Fixed responsive state when opening the menu * Update x-pack/plugins/apm/public/components/app/Settings/index.tsx Co-authored-by: Cauê Marcondes <[email protected]>
lcawl · Jan 5, 2021 · db854f5 · db854f5
1 parent bbf3137
commit db854f5
Showing 1 changed file with 23 additions and 8 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/Settings/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/index.tsx
@@ -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', {