From 8afec439c1b2356ad0951ca19925031d2f62a1a8 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 11:53:39 -0400
Subject: [PATCH 01/26] Updating Solution nav to use new props of EuiSideNav

# Conflicts:
#	src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
---
 .../solution_nav/solution_nav.tsx             | 38 +++++++------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index bd9ee8eb4d0e8..46573bff54941 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -10,14 +10,14 @@ import './solution_nav.scss';
 import React, { FunctionComponent, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiTitle, EuiSideNav, EuiSideNavProps, htmlIdGenerator } from '@elastic/eui';
+import { EuiSideNav, EuiSideNavProps } from '@elastic/eui';
 
 import {
   KibanaPageTemplateSolutionNavAvatar,
   KibanaPageTemplateSolutionNavAvatarProps,
 } from './solution_nav_avatar';
 
-export type KibanaPageTemplateSolutionNavProps = Partial<EuiSideNavProps<{}>> & {
+export type KibanaPageTemplateSolutionNavProps = Partial<EuiSideNavProps> & {
   /**
    * Name of the solution, i.e. "Observability"
    */
@@ -50,25 +50,18 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
     solutionAvatar = <KibanaPageTemplateSolutionNavAvatar iconType={icon} name={name} />;
   }
 
-  /**
-   * Create the required title.
-   * a11y: Since the heading can't be nested inside `<nav>`, we have to hook them up via `aria-labelledby`
-   */
-  const titleID = htmlIdGenerator('kbnPageTemplateSolutionNav__title')();
-  const solutionNavTitle = (
-    <EuiTitle size="xs" id={titleID} className="kbnPageTemplateSolutionNav__title">
-      <h2>
-        {solutionAvatar}
-        <strong>{name}</strong>
-      </h2>
-    </EuiTitle>
-  );
-
   /**
    * Create the side nav component
    */
   let sideNav;
   if (items) {
+    const solutionNavTitle = (
+      <>
+        {solutionAvatar}
+        <strong>{name}</strong>
+      </>
+    );
+
     const mobileTitleText = (
       <FormattedMessage
         id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
@@ -79,12 +72,12 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
 
     sideNav = (
       <EuiSideNav
-        aria-labelledby={titleID}
+        heading={solutionNavTitle}
         mobileTitle={
-          <h2>
+          <>
             {solutionAvatar}
             {mobileTitleText}
-          </h2>
+          </>
         }
         toggleOpenOnMobile={toggleOpenOnMobile}
         isOpenOnMobile={isSideNavOpenOnMobile}
@@ -94,10 +87,5 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
     );
   }
 
-  return (
-    <div className="kbnPageTemplateSolutionNav">
-      {solutionNavTitle}
-      {sideNav}
-    </div>
-  );
+  return <div className="kbnPageTemplateSolutionNav">{sideNav}</div>;
 };

From ed3041c18d6319cddf0bb185424820e833fa46be Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 17:18:10 -0400
Subject: [PATCH 02/26] Added a collapse button component

---
 .../page_template/solution_nav/index.ts       |  4 ++
 .../solution_nav_collapse_button.scss         | 33 ++++++++++++
 .../solution_nav_collapse_button.tsx          | 50 +++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
 create mode 100644 src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/index.ts b/src/plugins/kibana_react/public/page_template/solution_nav/index.ts
index abbcde9a08486..3dace6524fef5 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/index.ts
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/index.ts
@@ -11,3 +11,7 @@ export {
   KibanaPageTemplateSolutionNavAvatar,
   KibanaPageTemplateSolutionNavAvatarProps,
 } from './solution_nav_avatar';
+export {
+  KibanaPageTemplateSolutionNavCollapseButton,
+  KibanaPageTemplateSolutionNavCollapseButtonProps,
+} from './solution_nav_collapse_button';
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
new file mode 100644
index 0000000000000..971579cca9a8d
--- /dev/null
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -0,0 +1,33 @@
+.kbnPageTemplateSolutionNavCollapseButton {
+  // transition: left $euiAnimSpeedFast $euiAnimSlightResistance,
+  //             opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+  position: fixed;
+  opacity: 0;
+  left: 240px - $euiSize;
+  z-index: 2;
+
+  &:hover,
+  &:focus {
+    transition-delay: 0 !important;
+  }
+
+  .kbnPageTemplateSolutionNav:hover ~ &,
+  &:hover,
+  &:focus {
+    opacity: 1;
+    left: 240px - $euiSizeL;
+  }
+}
+
+.kbnPageTemplateSolutionNavCollapseButton-isCollapsed {
+  left: $euiSizeS !important;
+  opacity: 1 !important;
+  transition-delay: 0 !important;
+}
+
+@include euiBreakpoint('xs','s') {
+  // The collapsibility of the side nav is controlled by the EuiSideNav component at this breakpoint
+  .kbnPageTemplateSolutionNavCollapseButton {
+    display: none;
+  }
+}
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
new file mode 100644
index 0000000000000..36d4a962720c5
--- /dev/null
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import './solution_nav_collapse_button.scss';
+
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+
+import { EuiButtonIcon, EuiButtonIconPropsForButton } from '@elastic/eui';
+
+export type KibanaPageTemplateSolutionNavCollapseButtonProps = Partial<EuiButtonIconPropsForButton> & {
+  /**
+   * Boolean state of current collapsed status
+   */
+  isCollapsed: boolean;
+};
+
+/**
+ * Applies extra styling to a typical EuiAvatar
+ */
+export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<KibanaPageTemplateSolutionNavCollapseButtonProps> = ({
+  className,
+  isCollapsed,
+  ...rest
+}) => {
+  const classes = classNames(
+    'kbnPageTemplateSolutionNavCollapseButton',
+    {
+      'kbnPageTemplateSolutionNavCollapseButton-isCollapsed': isCollapsed,
+    },
+    className
+  );
+
+  return (
+    <EuiButtonIcon
+      className={classes}
+      iconType={isCollapsed ? 'menuRight' : 'menuLeft'}
+      size="s"
+      display="fill"
+      color="text"
+      aria-label="Collapse side navigation"
+      title="Collapse side navigation"
+      {...rest}
+    />
+  );
+};

From ed7d47627b555d91a2f3ae34980168937943a6f4 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 17:22:06 -0400
Subject: [PATCH 03/26] Remove hack for bottom bar types

---
 .../public/page_template/page_template.tsx            | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/src/plugins/kibana_react/public/page_template/page_template.tsx
index 0bbf97ca6ddb5..ca069b6295c62 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.tsx
+++ b/src/plugins/kibana_react/public/page_template/page_template.tsx
@@ -40,20 +40,10 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   children,
   isEmptyState,
   restrictWidth = true,
-  bottomBar,
-  bottomBarProps,
   pageSideBar,
   solutionNav,
   ...rest
 }) => {
-  // Needed for differentiating between union types
-  let localBottomBarProps = {};
-  if (template === 'default') {
-    localBottomBarProps = {
-      bottomBar,
-      bottomBarProps,
-    };
-  }
 
   /**
    * Create the solution nav component
@@ -95,7 +85,6 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
         ...rest.pageSideBarProps,
         className: classNames('kbnPageTemplate__pageSideBar', rest.pageSideBarProps?.className),
       }}
-      {...localBottomBarProps}
       {...rest}
     >
       {children}

From f0d27214096602c724cf7ab2d2ce0a7c9715d2cb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 18:07:03 -0400
Subject: [PATCH 04/26] Medium breakpoint puts side nav in a flyout

---
 src/core/public/rendering/_base.scss          |  4 ++
 .../public/page_template/page_template.scss   |  9 ++--
 .../public/page_template/page_template.tsx    |  1 +
 .../solution_nav/solution_nav.scss            | 27 +++++-----
 .../solution_nav/solution_nav.tsx             | 49 ++++++++++++++++++-
 .../solution_nav_collapse_button.tsx          |  2 +-
 6 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index 92ba28ff70887..8484500fdaba2 100644
--- a/src/core/public/rendering/_base.scss
+++ b/src/core/public/rendering/_base.scss
@@ -42,6 +42,10 @@
   #app-fixed-viewport {
     top: $headerHeight;
   }
+
+  .kbnPageTemplateSolutionNavCollapseButton {
+    top: $headerHeight + $euiSizeS;
+  }
 }
 
 .kbnBody {
diff --git a/src/plugins/kibana_react/public/page_template/page_template.scss b/src/plugins/kibana_react/public/page_template/page_template.scss
index 4b8513311114d..fa6bffca398d0 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.scss
+++ b/src/plugins/kibana_react/public/page_template/page_template.scss
@@ -1,10 +1,9 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
+// $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 
 .kbnPageTemplate__pageSideBar {
-  padding: $euiSizeL;
-  background:
-    linear-gradient(160deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSizeXL, rgba(#FFF, 0) 0),
-    linear-gradient(175deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSize, rgba(#FFF, 0) 0);
+  @include euiBreakpoint('m') {
+    min-width: $euiSizeL * 2;
+  }
 }
 
 @include euiBreakpoint('xs','s') {
diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/src/plugins/kibana_react/public/page_template/page_template.tsx
index ca069b6295c62..4781f0271de2c 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.tsx
+++ b/src/plugins/kibana_react/public/page_template/page_template.tsx
@@ -82,6 +82,7 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
       pageHeader={pageHeader}
       pageSideBar={pageSideBar}
       pageSideBarProps={{
+        paddingSize: 'none',
         ...rest.pageSideBarProps,
         className: classNames('kbnPageTemplate__pageSideBar', rest.pageSideBarProps?.className),
       }}
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
index bdb88b2ab7baa..55f520eca8172 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
@@ -1,22 +1,17 @@
-.kbnPageTemplateSolutionNav__title {
-  margin-bottom: $euiSizeL;
-}
+$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 
-@include euiBreakpoint('xs','s') {
-  .kbnPageTemplateSolutionNav {
-    // TODO: Fix in EUI
-    .euiSideNav__mobileToggle {
-      height: auto;
-      font-size: $euiFontSizeM;
+.kbnPageTemplateSolutionNav {
+  background:
+    linear-gradient(160deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSizeXL, rgba(#FFF, 0) 0),
+    linear-gradient(175deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSize, rgba(#FFF, 0) 0),
+    $euiPageBackgroundColor;
 
-      .euiButtonEmpty__text {
-        overflow: visible;
-      }
-    }
+  @include euiBreakpoint('m') {
+    @include euiYScroll;
+    padding: $euiSizeL;
   }
 
-  // Rely on the `mobileToggle` of the EuiSideNav component to title the navigation list
-  .kbnPageTemplateSolutionNav__title {
-    display: none;
+  @include euiBreakpoint('l', 'xl') {
+    padding: $euiSizeL;
   }
 }
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index 46573bff54941..416274b3c0f0f 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -10,12 +10,13 @@ import './solution_nav.scss';
 import React, { FunctionComponent, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiSideNav, EuiSideNavProps } from '@elastic/eui';
+import { EuiFlyout, EuiSideNav, EuiSideNavProps, useIsWithinBreakpoints } from '@elastic/eui';
 
 import {
   KibanaPageTemplateSolutionNavAvatar,
   KibanaPageTemplateSolutionNavAvatarProps,
 } from './solution_nav_avatar';
+import { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
 
 export type KibanaPageTemplateSolutionNavProps = Partial<EuiSideNavProps> & {
   /**
@@ -37,10 +38,20 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   items,
   ...rest
 }) => {
+  // The EuiShowFor and EuiHideFor components are not in sync with the euiBreakpoint() function :(
+  const isSmallerBreakpoint = useIsWithinBreakpoints(['xs', 's']);
+  const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
+  const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+
+  // Keep each method of open/closed separate since they have different defaults
   const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
   const toggleOpenOnMobile = () => {
     setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
   };
+  const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(false);
+  const toggleOpenOnDesktop = () => {
+    setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop);
+  };
 
   /**
    * Create the avatar.
@@ -72,6 +83,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
 
     sideNav = (
       <EuiSideNav
+        className="kbnPageTemplateSolutionNav"
         heading={solutionNavTitle}
         mobileTitle={
           <>
@@ -87,5 +99,38 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
     );
   }
 
-  return <div className="kbnPageTemplateSolutionNav">{sideNav}</div>;
+  return (
+    <>
+      {isSmallerBreakpoint && sideNav}
+      {isMediumBreakpoint && (
+        <>
+          {isSideNavOpenOnMobile && (
+            <EuiFlyout
+              ownFocus={false}
+              outsideClickCloses
+              onClose={() => setisSideNavOpenOnMobile(false)}
+              side="left"
+              size={240}
+              closeButtonPosition="outside"
+            >
+              {sideNav}
+            </EuiFlyout>
+          )}
+          <KibanaPageTemplateSolutionNavCollapseButton
+            isCollapsed={true}
+            onClick={toggleOpenOnMobile}
+          />
+        </>
+      )}
+      {isLargerBreakpoint && (
+        <>
+          {sideNav}
+          <KibanaPageTemplateSolutionNavCollapseButton
+            isCollapsed={isSideNavOpenOnDesktop}
+            onClick={toggleOpenOnDesktop}
+          />
+        </>
+      )}
+    </>
+  );
 };
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
index 36d4a962720c5..09b49a23ba060 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -20,7 +20,7 @@ export type KibanaPageTemplateSolutionNavCollapseButtonProps = Partial<EuiButton
 };
 
 /**
- * Applies extra styling to a typical EuiAvatar
+ * Creates the styled icon button for showing/hiding solution nav
  */
 export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<KibanaPageTemplateSolutionNavCollapseButtonProps> = ({
   className,

From fbff4165b04742a9c1714ebe67b0497148df3018 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 18:49:44 -0400
Subject: [PATCH 05/26] Collapsibility is working on larger screens

---
 .../public/page_template/page_template.scss   | 13 ++---
 .../public/page_template/page_template.tsx    | 39 +++++++++++--
 .../solution_nav/solution_nav.scss            | 13 ++++-
 .../solution_nav/solution_nav.tsx             | 56 +++++++++++--------
 .../solution_nav_collapse_button.scss         |  2 +-
 5 files changed, 86 insertions(+), 37 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/page_template.scss b/src/plugins/kibana_react/public/page_template/page_template.scss
index fa6bffca398d0..90a8456bb1be2 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.scss
+++ b/src/plugins/kibana_react/public/page_template/page_template.scss
@@ -1,14 +1,13 @@
 // $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 
 .kbnPageTemplate__pageSideBar {
-  @include euiBreakpoint('m') {
-    min-width: $euiSizeL * 2;
+  overflow: hidden;
+
+  @include euiCanAnimate {
+    transition: min-width $euiAnimSpeedFast $euiAnimSlightResistance;
   }
-}
 
-@include euiBreakpoint('xs','s') {
-  .kbnPageTemplate__pageSideBar {
-    width: auto;
-    padding: 0;
+  &.kbnPageTemplate__pageSideBar--shrink {
+    min-width: $euiSizeL * 2;
   }
 }
diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/src/plugins/kibana_react/public/page_template/page_template.tsx
index 4781f0271de2c..70f5b39f27354 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.tsx
+++ b/src/plugins/kibana_react/public/page_template/page_template.tsx
@@ -5,12 +5,19 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
+/* eslint-disable @typescript-eslint/naming-convention */
 import './page_template.scss';
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import classNames from 'classnames';
 
-import { EuiEmptyPrompt, EuiPageTemplate, EuiPageTemplateProps } from '@elastic/eui';
+import {
+  EuiEmptyPrompt,
+  EuiPageTemplate,
+  EuiPageTemplateProps,
+  useIsWithinBreakpoints,
+} from '@elastic/eui';
 
 import {
   KibanaPageTemplateSolutionNav,
@@ -44,12 +51,34 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   solutionNav,
   ...rest
 }) => {
+  /**
+   * Only default to open in large+ breakpoints
+   */
+  const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
+  const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
 
   /**
    * Create the solution nav component
    */
+  const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(true);
+  const toggleOpenOnDesktop = () => {
+    setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop);
+  };
+  let sideBarClasses = 'kbnPageTemplate__pageSideBar';
   if (solutionNav) {
-    pageSideBar = <KibanaPageTemplateSolutionNav {...solutionNav} />;
+    // Only apply shrinking classes if collapsibility is available through `solutionNav`
+    sideBarClasses = classNames(sideBarClasses, {
+      'kbnPageTemplate__pageSideBar--shrink':
+        isMediumBreakpoint || (isLargerBreakpoint && !isSideNavOpenOnDesktop),
+    });
+
+    pageSideBar = (
+      <KibanaPageTemplateSolutionNav
+        isOpenOnDesktop={isSideNavOpenOnDesktop}
+        onCollapse={toggleOpenOnDesktop}
+        {...solutionNav}
+      />
+    );
   }
 
   /**
@@ -82,9 +111,9 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
       pageHeader={pageHeader}
       pageSideBar={pageSideBar}
       pageSideBarProps={{
-        paddingSize: 'none',
+        paddingSize: solutionNav ? 'none' : 'l',
         ...rest.pageSideBarProps,
-        className: classNames('kbnPageTemplate__pageSideBar', rest.pageSideBarProps?.className),
+        className: classNames(sideBarClasses, rest.pageSideBarProps?.className),
       }}
       {...rest}
     >
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
index 55f520eca8172..e68e4e4ab792e 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
@@ -1,17 +1,28 @@
 $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 
 .kbnPageTemplateSolutionNav {
+  @include euiYScroll;
   background:
     linear-gradient(160deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSizeXL, rgba(#FFF, 0) 0),
     linear-gradient(175deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSize, rgba(#FFF, 0) 0),
     $euiPageBackgroundColor;
 
   @include euiBreakpoint('m') {
-    @include euiYScroll;
+    width: $euiPageSidebarMinWidth + ($euiSizeL * 2);
     padding: $euiSizeL;
   }
 
   @include euiBreakpoint('l', 'xl') {
+    width: $euiPageSidebarMinWidth + ($euiSizeL * 2);
     padding: $euiSizeL;
   }
 }
+
+.kbnPageTemplateSolutionNav--hidden {
+  pointer-events: none;
+  opacity: 0;
+
+  @include euiCanAnimate {
+    transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+  }
+}
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index 416274b3c0f0f..922ecc575295a 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -12,6 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { EuiFlyout, EuiSideNav, EuiSideNavProps, useIsWithinBreakpoints } from '@elastic/eui';
 
+import classNames from 'classnames';
 import {
   KibanaPageTemplateSolutionNavAvatar,
   KibanaPageTemplateSolutionNavAvatarProps,
@@ -27,6 +28,11 @@ export type KibanaPageTemplateSolutionNavProps = Partial<EuiSideNavProps> & {
    * Solution logo, i.e. "logoObservability"
    */
   icon?: KibanaPageTemplateSolutionNavAvatarProps['iconType'];
+  /**
+   * Control the collapsed state
+   */
+  isOpenOnDesktop?: boolean;
+  onCollapse?: () => void;
 };
 
 /**
@@ -36,6 +42,8 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   name,
   icon,
   items,
+  isOpenOnDesktop = false,
+  onCollapse,
   ...rest
 }) => {
   // The EuiShowFor and EuiHideFor components are not in sync with the euiBreakpoint() function :(
@@ -48,43 +56,45 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   const toggleOpenOnMobile = () => {
     setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
   };
-  const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(false);
-  const toggleOpenOnDesktop = () => {
-    setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop);
-  };
 
   /**
-   * Create the avatar.
+   * Create the avatar
    */
   let solutionAvatar;
   if (icon) {
     solutionAvatar = <KibanaPageTemplateSolutionNavAvatar iconType={icon} name={name} />;
   }
 
+  /**
+   * Create the titles
+   */
+  const titleText = (
+    <>
+      {solutionAvatar}
+      <strong>{name}</strong>
+    </>
+  );
+  const mobileTitleText = (
+    <FormattedMessage
+      id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
+      defaultMessage="{solutionName} Menu"
+      values={{ solutionName: name || 'Navigation' }}
+    />
+  );
+
   /**
    * Create the side nav component
    */
   let sideNav;
   if (items) {
-    const solutionNavTitle = (
-      <>
-        {solutionAvatar}
-        <strong>{name}</strong>
-      </>
-    );
-
-    const mobileTitleText = (
-      <FormattedMessage
-        id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
-        defaultMessage="{solutionName} Menu"
-        values={{ solutionName: name || 'Navigation' }}
-      />
-    );
+    const sideNavClasses = classNames('kbnPageTemplateSolutionNav', {
+      'kbnPageTemplateSolutionNav--hidden': isLargerBreakpoint && !isOpenOnDesktop,
+    });
 
     sideNav = (
       <EuiSideNav
-        className="kbnPageTemplateSolutionNav"
-        heading={solutionNavTitle}
+        className={sideNavClasses}
+        heading={titleText}
         mobileTitle={
           <>
             {solutionAvatar}
@@ -126,8 +136,8 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
         <>
           {sideNav}
           <KibanaPageTemplateSolutionNavCollapseButton
-            isCollapsed={isSideNavOpenOnDesktop}
-            onClick={toggleOpenOnDesktop}
+            isCollapsed={!isOpenOnDesktop}
+            onClick={onCollapse}
           />
         </>
       )}
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
index 971579cca9a8d..22d54b55dff22 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -11,7 +11,7 @@
     transition-delay: 0 !important;
   }
 
-  .kbnPageTemplateSolutionNav:hover ~ &,
+  .kbnPageTemplate__pageSideBar:hover ~ &,
   &:hover,
   &:focus {
     opacity: 1;

From 0bd71bd61c22101e4aabf09d43bf4a3066688716 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 18:58:58 -0400
Subject: [PATCH 06/26] Adding transitions and delays to button

---
 .../solution_nav_collapse_button.scss         | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
index 22d54b55dff22..217dd95ac8c9b 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -6,28 +6,29 @@
   left: 240px - $euiSize;
   z-index: 2;
 
+  @include euiCanAnimate {
+    transition: opacity $euiAnimSpeedFast, left $euiAnimSpeedFast;
+  }
+
   &:hover,
   &:focus {
-    transition-delay: 0 !important;
+    transition-delay: 0s !important;
   }
 
-  .kbnPageTemplate__pageSideBar:hover ~ &,
+  .kbnPageTemplate__pageSideBar:hover &,
   &:hover,
   &:focus {
     opacity: 1;
     left: 240px - $euiSizeL;
   }
+
+  .kbnPageTemplate__pageSideBar:hover & {
+    transition-delay: 2s;
+  }
 }
 
 .kbnPageTemplateSolutionNavCollapseButton-isCollapsed {
   left: $euiSizeS !important;
   opacity: 1 !important;
-  transition-delay: 0 !important;
-}
-
-@include euiBreakpoint('xs','s') {
-  // The collapsibility of the side nav is controlled by the EuiSideNav component at this breakpoint
-  .kbnPageTemplateSolutionNavCollapseButton {
-    display: none;
-  }
+  transition-delay: 0s !important;
 }

From 373e3680e26bf1e2d32f92ca2c540d72ea0ecd02 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 19:13:25 -0400
Subject: [PATCH 07/26] localStorage

---
 .../kibana_react/public/page_template/page_template.tsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/src/plugins/kibana_react/public/page_template/page_template.tsx
index 70f5b39f27354..27569a32c4391 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.tsx
+++ b/src/plugins/kibana_react/public/page_template/page_template.tsx
@@ -60,9 +60,13 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   /**
    * Create the solution nav component
    */
-  const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(true);
+  const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(
+    JSON.parse(String(localStorage.getItem('solutionNavIsCollapsed'))) ? false : true
+  );
   const toggleOpenOnDesktop = () => {
     setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop);
+    // Have to store it as the opposite of the default we want
+    localStorage.setItem('solutionNavIsCollapsed', JSON.stringify(isSideNavOpenOnDesktop));
   };
   let sideBarClasses = 'kbnPageTemplate__pageSideBar';
   if (solutionNav) {

From 92b5f45f61c632257a0fe4f3d887eded78492f33 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 23 Jun 2021 21:07:22 -0400
Subject: [PATCH 08/26] Fix position of button

---
 src/core/public/rendering/_base.scss                         | 4 ----
 .../public/page_template/solution_nav/solution_nav.tsx       | 2 +-
 .../solution_nav/solution_nav_collapse_button.scss           | 5 ++---
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index 8484500fdaba2..92ba28ff70887 100644
--- a/src/core/public/rendering/_base.scss
+++ b/src/core/public/rendering/_base.scss
@@ -42,10 +42,6 @@
   #app-fixed-viewport {
     top: $headerHeight;
   }
-
-  .kbnPageTemplateSolutionNavCollapseButton {
-    top: $headerHeight + $euiSizeS;
-  }
 }
 
 .kbnBody {
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index 922ecc575295a..83b893cde0be3 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -51,7 +51,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
   const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
 
-  // Keep each method of open/closed separate since they have different defaults
+  // This is used for both the EuiSideNav and EuiFlyout toggling
   const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
   const toggleOpenOnMobile = () => {
     setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
index 217dd95ac8c9b..a39262fc62d09 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -1,9 +1,8 @@
 .kbnPageTemplateSolutionNavCollapseButton {
-  // transition: left $euiAnimSpeedFast $euiAnimSlightResistance,
-  //             opacity $euiAnimSpeedFast $euiAnimSlightResistance;
-  position: fixed;
+  position: absolute;
   opacity: 0;
   left: 240px - $euiSize;
+  top: $euiSize;
   z-index: 2;
 
   @include euiCanAnimate {

From c93f00264678a3a04cfd9dd76c99f3d1a4f97945 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 24 Jun 2021 14:25:42 -0400
Subject: [PATCH 09/26] Updated Global Nav to new design specs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moved location of nav in header.tsx to wrap the button to fix the toggle behavior
- No more locking/docking (only commented out the ability, JIC)
- Skinnier overall flyout
- Smaller solution icons
- Hiding the whole “Recently viewed” section if empty
- No overlay mask
- Added stub in for an “Add Data” button
---
 .../collapsible_nav.test.tsx.snap             |  858 ++------
 .../header/__snapshots__/header.test.tsx.snap | 1871 ++++++-----------
 .../chrome/ui/header/collapsible_nav.test.tsx |   16 +-
 .../chrome/ui/header/collapsible_nav.tsx      |   56 +-
 src/core/public/chrome/ui/header/header.tsx   |   69 +-
 5 files changed, 855 insertions(+), 2015 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 0b10209bc13e5..801ee55e6bce8 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -61,6 +61,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       "serverBasePath": "/test",
     }
   }
+  button={<button />}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -364,12 +365,21 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
 >
   <EuiCollapsibleNav
     aria-label="Primary"
+    button={<button />}
     data-test-subj="collapsibleNav"
     id="collapsibe-nav"
-    isDocked={false}
     isOpen={true}
     onClose={[Function]}
+    ownFocus={false}
+    size={240}
   >
+    <button
+      aria-controls="collapsibe-nav"
+      aria-expanded={true}
+      aria-pressed={true}
+      onMouseUpCapture={[Function]}
+      onTouchEnd={[Function]}
+    />
     <EuiFlyout
       aria-label="Primary"
       as="nav"
@@ -380,12 +390,12 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       id="collapsibe-nav"
       onClose={[Function]}
       outsideClickCloses={true}
-      ownFocus={true}
+      ownFocus={false}
       paddingSize="none"
       pushMinBreakpoint="l"
       role={null}
       side="left"
-      size={320}
+      size={240}
       type="overlay"
     >
       <nav
@@ -872,6 +882,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
           >
             <EuiCollapsibleNavGroup
               data-test-subj="collapsibleNavGroup-kibana"
+              iconSize="m"
               iconType="logoKibana"
               initialIsOpen={true}
               isCollapsible={true}
@@ -892,7 +903,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       grow={false}
                     >
                       <EuiIcon
-                        size="l"
+                        size="m"
                         type="logoKibana"
                       />
                     </EuiFlexItem>
@@ -968,12 +979,12 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <EuiIcon
-                                  size="l"
+                                  size="m"
                                   type="logoKibana"
                                 >
                                   <span
                                     data-euiicon-type="logoKibana"
-                                    size="l"
+                                    size="m"
                                   />
                                 </EuiIcon>
                               </div>
@@ -1165,6 +1176,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             </EuiCollapsibleNavGroup>
             <EuiCollapsibleNavGroup
               data-test-subj="collapsibleNavGroup-observability"
+              iconSize="m"
               iconType="logoObservability"
               initialIsOpen={true}
               isCollapsible={true}
@@ -1185,7 +1197,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       grow={false}
                     >
                       <EuiIcon
-                        size="l"
+                        size="m"
                         type="logoObservability"
                       />
                     </EuiFlexItem>
@@ -1261,12 +1273,12 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <EuiIcon
-                                  size="l"
+                                  size="m"
                                   type="logoObservability"
                                 >
                                   <span
                                     data-euiicon-type="logoObservability"
-                                    size="l"
+                                    size="m"
                                   />
                                 </EuiIcon>
                               </div>
@@ -1419,6 +1431,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             </EuiCollapsibleNavGroup>
             <EuiCollapsibleNavGroup
               data-test-subj="collapsibleNavGroup-securitySolution"
+              iconSize="m"
               iconType="logoSecurity"
               initialIsOpen={true}
               isCollapsible={true}
@@ -1439,7 +1452,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       grow={false}
                     >
                       <EuiIcon
-                        size="l"
+                        size="m"
                         type="logoSecurity"
                       />
                     </EuiFlexItem>
@@ -1515,12 +1528,12 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <EuiIcon
-                                  size="l"
+                                  size="m"
                                   type="logoSecurity"
                                 >
                                   <span
                                     data-euiicon-type="logoSecurity"
-                                    size="l"
+                                    size="m"
                                   />
                                 </EuiIcon>
                               </div>
@@ -1634,6 +1647,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             </EuiCollapsibleNavGroup>
             <EuiCollapsibleNavGroup
               data-test-subj="collapsibleNavGroup-management"
+              iconSize="m"
               iconType="managementApp"
               initialIsOpen={true}
               isCollapsible={true}
@@ -1654,7 +1668,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       grow={false}
                     >
                       <EuiIcon
-                        size="l"
+                        size="m"
                         type="managementApp"
                       />
                     </EuiFlexItem>
@@ -1730,12 +1744,12 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <EuiIcon
-                                  size="l"
+                                  size="m"
                                   type="managementApp"
                                 >
                                   <span
                                     data-euiicon-type="managementApp"
-                                    size="l"
+                                    size="m"
                                   />
                                 </EuiIcon>
                               </div>
@@ -1899,95 +1913,89 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
               </div>
             </EuiCollapsibleNavGroup>
             <EuiShowFor
-              sizes={
-                Array [
-                  "l",
-                  "xl",
-                ]
-              }
-            >
-              <EuiCollapsibleNavGroup>
+              sizes="none"
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <span />
+            <EuiCollapsibleNavGroup>
+              <div
+                className="euiCollapsibleNavGroup"
+                id="generated-id"
+              >
                 <div
-                  className="euiCollapsibleNavGroup"
-                  id="generated-id"
+                  className="euiCollapsibleNavGroup__children"
                 >
-                  <div
-                    className="euiCollapsibleNavGroup__children"
+                  <EuiButton
+                    fill={true}
+                    fullWidth={true}
+                    iconType="plusInCircleFilled"
                   >
-                    <EuiListGroup
-                      flush={true}
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
+                      disabled={false}
+                      element="button"
+                      fill={true}
+                      fullWidth={true}
+                      iconType="plusInCircleFilled"
+                      isDisabled={false}
+                      type="button"
                     >
-                      <ul
-                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                      <button
+                        className="euiButton euiButton--primary euiButton--fill euiButton--fullWidth"
+                        disabled={false}
+                        style={
+                          Object {
+                            "minWidth": undefined,
+                          }
+                        }
+                        type="button"
                       >
-                        <EuiListGroupItem
-                          aria-label="Dock primary navigation"
-                          buttonRef={
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="plusInCircleFilled"
+                          textProps={
                             Object {
-                              "current": <button
-                                aria-label="Dock primary navigation"
-                                class="euiListGroupItem__button"
-                                data-test-subj="collapsible-nav-lock"
-                                type="button"
-                              >
-                                <span
-                                  class="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lockOpen"
-                                />
-                                <span
-                                  class="euiListGroupItem__label"
-                                  title="Dock navigation"
-                                >
-                                  Dock navigation
-                                </span>
-                              </button>,
+                              "className": "euiButton__text",
                             }
                           }
-                          color="subdued"
-                          data-test-subj="collapsible-nav-lock"
-                          iconType="lockOpen"
-                          label="Dock navigation"
-                          onClick={[Function]}
-                          size="xs"
                         >
-                          <li
-                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            <button
-                              aria-label="Dock primary navigation"
-                              className="euiListGroupItem__button"
-                              data-test-subj="collapsible-nav-lock"
-                              disabled={false}
-                              onClick={[Function]}
-                              type="button"
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              color="inherit"
+                              size="m"
+                              type="plusInCircleFilled"
                             >
-                              <EuiIcon
-                                className="euiListGroupItem__icon"
-                                color="inherit"
-                                type="lockOpen"
-                              >
-                                <span
-                                  className="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lockOpen"
-                                />
-                              </EuiIcon>
                               <span
-                                className="euiListGroupItem__label"
-                                title="Dock navigation"
-                              >
-                                Dock navigation
-                              </span>
-                            </button>
-                          </li>
-                        </EuiListGroupItem>
-                      </ul>
-                    </EuiListGroup>
-                  </div>
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                data-euiicon-type="plusInCircleFilled"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              Add Data
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
                 </div>
-              </EuiCollapsibleNavGroup>
-            </EuiShowFor>
+              </div>
+            </EuiCollapsibleNavGroup>
           </div>
         </EuiFlexItem>
       </nav>
@@ -2057,6 +2065,7 @@ exports[`CollapsibleNav renders the default nav 1`] = `
       "serverBasePath": "/test",
     }
   }
+  button={<button />}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2224,12 +2233,22 @@ exports[`CollapsibleNav renders the default nav 1`] = `
 >
   <EuiCollapsibleNav
     aria-label="Primary"
+    button={<button />}
     data-test-subj="collapsibleNav"
     id="collapsibe-nav"
-    isDocked={false}
     isOpen={false}
     onClose={[Function]}
-  />
+    ownFocus={false}
+    size={240}
+  >
+    <button
+      aria-controls="collapsibe-nav"
+      aria-expanded={false}
+      aria-pressed={false}
+      onMouseUpCapture={[Function]}
+      onTouchEnd={[Function]}
+    />
+  </EuiCollapsibleNav>
 </CollapsibleNav>
 `;
 
@@ -2294,6 +2313,7 @@ exports[`CollapsibleNav renders the default nav 2`] = `
       "serverBasePath": "/test",
     }
   }
+  button={<button />}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2462,653 +2482,21 @@ exports[`CollapsibleNav renders the default nav 2`] = `
 >
   <EuiCollapsibleNav
     aria-label="Primary"
+    button={<button />}
     data-test-subj="collapsibleNav"
     id="collapsibe-nav"
-    isDocked={false}
-    isOpen={false}
-    onClose={[Function]}
-  />
-</CollapsibleNav>
-`;
-
-exports[`CollapsibleNav renders the default nav 3`] = `
-<CollapsibleNav
-  appId$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": "test",
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  basePath={
-    BasePath {
-      "basePath": "/test",
-      "get": [Function],
-      "prepend": [Function],
-      "publicBaseUrl": undefined,
-      "remove": [Function],
-      "serverBasePath": "/test",
-    }
-  }
-  closeNav={[Function]}
-  customNavLink$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": undefined,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  homeHref="/"
-  id="collapsibe-nav"
-  isLocked={true}
-  isNavOpen={false}
-  isOpen={true}
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[Function]}
-  navigateToUrl={[Function]}
-  onIsLockedUpdate={[Function]}
-  recentlyAccessed$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  storage={
-    StubBrowserStorage {
-      "keys": Array [],
-      "size": 0,
-      "sizeLimit": 5000000,
-      "values": Array [],
-    }
-  }
-  url="/"
->
-  <EuiCollapsibleNav
-    aria-label="Primary"
-    data-test-subj="collapsibleNav"
-    id="collapsibe-nav"
-    isDocked={true}
     isOpen={false}
     onClose={[Function]}
+    ownFocus={false}
+    size={240}
   >
-    <EuiFlyout
-      aria-label="Primary"
-      as="nav"
-      className="euiCollapsibleNav"
-      closeButtonPosition="outside"
-      data-test-subj="collapsibleNav"
-      hideCloseButton={true}
-      id="collapsibe-nav"
-      onClose={[Function]}
-      outsideClickCloses={true}
-      ownFocus={true}
-      paddingSize="none"
-      pushMinBreakpoint="l"
-      role={null}
-      side="left"
-      size={320}
-      type="push"
-    >
-      <nav
-        data-eui="EuiFlyout"
-        data-test-subj="collapsibleNav"
-        role={null}
-      >
-        <EuiFlexItem
-          grow={false}
-          style={
-            Object {
-              "flexShrink": 0,
-            }
-          }
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-            style={
-              Object {
-                "flexShrink": 0,
-              }
-            }
-          >
-            <EuiCollapsibleNavGroup
-              background="light"
-              className="eui-yScroll"
-              style={
-                Object {
-                  "maxHeight": "40vh",
-                }
-              }
-            >
-              <div
-                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                id="generated-id"
-                style={
-                  Object {
-                    "maxHeight": "40vh",
-                  }
-                }
-              >
-                <div
-                  className="euiCollapsibleNavGroup__children"
-                >
-                  <EuiListGroup
-                    aria-label="Pinned links"
-                    color="text"
-                    gutterSize="none"
-                    listItems={
-                      Array [
-                        Object {
-                          "data-test-subj": "homeLink",
-                          "href": "/",
-                          "iconType": "home",
-                          "label": "Home",
-                          "onClick": [Function],
-                        },
-                      ]
-                    }
-                    maxWidth="none"
-                    size="s"
-                  >
-                    <ul
-                      aria-label="Pinned links"
-                      className="euiListGroup"
-                      style={
-                        Object {
-                          "maxWidth": "none",
-                        }
-                      }
-                    >
-                      <EuiListGroupItem
-                        color="text"
-                        data-test-subj="homeLink"
-                        href="/"
-                        iconType="home"
-                        key="title-0"
-                        label="Home"
-                        onClick={[Function]}
-                        showToolTip={false}
-                        size="s"
-                        wrapText={false}
-                      >
-                        <li
-                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                        >
-                          <a
-                            className="euiListGroupItem__button"
-                            data-test-subj="homeLink"
-                            href="/"
-                            onClick={[Function]}
-                            rel="noreferrer"
-                          >
-                            <EuiIcon
-                              className="euiListGroupItem__icon"
-                              color="inherit"
-                              type="home"
-                            >
-                              <span
-                                className="euiListGroupItem__icon"
-                                color="inherit"
-                                data-euiicon-type="home"
-                              />
-                            </EuiIcon>
-                            <span
-                              className="euiListGroupItem__label"
-                              title="Home"
-                            >
-                              Home
-                            </span>
-                          </a>
-                        </li>
-                      </EuiListGroupItem>
-                    </ul>
-                  </EuiListGroup>
-                </div>
-              </div>
-            </EuiCollapsibleNavGroup>
-          </div>
-        </EuiFlexItem>
-        <EuiCollapsibleNavGroup
-          background="light"
-          data-test-subj="collapsibleNavGroup-recentlyViewed"
-          initialIsOpen={true}
-          isCollapsible={true}
-          key="recentlyViewed"
-          onToggle={[Function]}
-          title="Recently viewed"
-        >
-          <EuiAccordion
-            arrowDisplay="right"
-            buttonClassName="euiCollapsibleNavGroup__heading"
-            buttonContent={
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="m"
-                responsive={false}
-              >
-                <EuiFlexItem>
-                  <EuiTitle
-                    size="xxs"
-                  >
-                    <h3
-                      className="euiCollapsibleNavGroup__title"
-                      id="generated-id__title"
-                    >
-                      Recently viewed
-                    </h3>
-                  </EuiTitle>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            }
-            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-            data-test-subj="collapsibleNavGroup-recentlyViewed"
-            id="generated-id"
-            initialIsOpen={true}
-            isLoading={false}
-            isLoadingMessage={false}
-            onToggle={[Function]}
-            paddingSize="none"
-          >
-            <div
-              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-              data-test-subj="collapsibleNavGroup-recentlyViewed"
-              onToggle={[Function]}
-            >
-              <div
-                className="euiAccordion__triggerWrapper"
-              >
-                <button
-                  aria-controls="generated-id"
-                  aria-expanded={true}
-                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                  id="generated-id"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
-                  >
-                    <EuiFlexGroup
-                      alignItems="center"
-                      gutterSize="m"
-                      responsive={false}
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                      >
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <h3
-                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                id="generated-id__title"
-                              >
-                                Recently viewed
-                              </h3>
-                            </EuiTitle>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-labelledby="generated-id"
-                className="euiAccordion__childWrapper"
-                id="generated-id"
-                role="region"
-                tabIndex={-1}
-              >
-                <EuiResizeObserver
-                  onResize={[Function]}
-                >
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <div
-                        className="euiCollapsibleNavGroup__children"
-                      >
-                        <EuiText
-                          color="subdued"
-                          size="s"
-                          style={
-                            Object {
-                              "padding": "0 8px 8px",
-                            }
-                          }
-                        >
-                          <div
-                            className="euiText euiText--small"
-                            style={
-                              Object {
-                                "padding": "0 8px 8px",
-                              }
-                            }
-                          >
-                            <EuiTextColor
-                              color="subdued"
-                              component="div"
-                            >
-                              <div
-                                className="euiTextColor euiTextColor--subdued"
-                              >
-                                <p>
-                                  No recently viewed items
-                                </p>
-                              </div>
-                            </EuiTextColor>
-                          </div>
-                        </EuiText>
-                      </div>
-                    </div>
-                  </div>
-                </EuiResizeObserver>
-              </div>
-            </div>
-          </EuiAccordion>
-        </EuiCollapsibleNavGroup>
-        <EuiHorizontalRule
-          margin="none"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full"
-          />
-        </EuiHorizontalRule>
-        <EuiFlexItem
-          className="eui-yScroll"
-        >
-          <div
-            className="euiFlexItem eui-yScroll"
-          >
-            <EuiShowFor
-              sizes={
-                Array [
-                  "l",
-                  "xl",
-                ]
-              }
-            >
-              <EuiCollapsibleNavGroup>
-                <div
-                  className="euiCollapsibleNavGroup"
-                  id="generated-id"
-                >
-                  <div
-                    className="euiCollapsibleNavGroup__children"
-                  >
-                    <EuiListGroup
-                      flush={true}
-                    >
-                      <ul
-                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                      >
-                        <EuiListGroupItem
-                          aria-label="Undock primary navigation"
-                          buttonRef={
-                            Object {
-                              "current": <button
-                                aria-label="Undock primary navigation"
-                                class="euiListGroupItem__button"
-                                data-test-subj="collapsible-nav-lock"
-                                type="button"
-                              >
-                                <span
-                                  class="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lock"
-                                />
-                                <span
-                                  class="euiListGroupItem__label"
-                                  title="Undock navigation"
-                                >
-                                  Undock navigation
-                                </span>
-                              </button>,
-                            }
-                          }
-                          color="subdued"
-                          data-test-subj="collapsible-nav-lock"
-                          iconType="lock"
-                          label="Undock navigation"
-                          onClick={[Function]}
-                          size="xs"
-                        >
-                          <li
-                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                          >
-                            <button
-                              aria-label="Undock primary navigation"
-                              className="euiListGroupItem__button"
-                              data-test-subj="collapsible-nav-lock"
-                              disabled={false}
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiIcon
-                                className="euiListGroupItem__icon"
-                                color="inherit"
-                                type="lock"
-                              >
-                                <span
-                                  className="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lock"
-                                />
-                              </EuiIcon>
-                              <span
-                                className="euiListGroupItem__label"
-                                title="Undock navigation"
-                              >
-                                Undock navigation
-                              </span>
-                            </button>
-                          </li>
-                        </EuiListGroupItem>
-                      </ul>
-                    </EuiListGroup>
-                  </div>
-                </div>
-              </EuiCollapsibleNavGroup>
-            </EuiShowFor>
-          </div>
-        </EuiFlexItem>
-      </nav>
-    </EuiFlyout>
+    <button
+      aria-controls="collapsibe-nav"
+      aria-expanded={false}
+      aria-pressed={false}
+      onMouseUpCapture={[Function]}
+      onTouchEnd={[Function]}
+    />
   </EuiCollapsibleNav>
 </CollapsibleNav>
 `;
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
index 5aee9ca1b7c08..b59916fc4299c 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -4241,372 +4241,250 @@ exports[`Header renders 1`] = `
                 <div
                   className="euiHeaderSectionItem euiHeaderSectionItem--borderRight header__toggleNavButtonSection"
                 >
-                  <EuiHeaderSectionItemButton
-                    aria-controls="mockId"
-                    aria-expanded={false}
-                    aria-label="Toggle primary navigation"
-                    aria-pressed={false}
-                    data-test-subj="toggleNavButton"
-                    onClick={[Function]}
-                  >
-                    <EuiButtonEmpty
-                      aria-controls="mockId"
-                      aria-expanded={false}
-                      aria-label="Toggle primary navigation"
-                      aria-pressed={false}
-                      buttonRef={
-                        Object {
-                          "current": <button
-                            aria-controls="mockId"
-                            aria-expanded="false"
-                            aria-label="Toggle primary navigation"
-                            aria-pressed="false"
-                            class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
-                            data-test-subj="toggleNavButton"
-                            type="button"
-                          >
-                            <span
-                              class="euiButtonContent euiButtonEmpty__content"
-                            >
-                              <span
-                                class="euiButtonEmpty__text"
-                              >
-                                <span
-                                  class="euiHeaderSectionItemButton__content"
-                                >
-                                  <span
-                                    data-euiicon-type="menu"
-                                  />
-                                </span>
-                              </span>
-                            </span>
-                          </button>,
-                        }
+                  <CollapsibleNav
+                    appId$={
+                      Observable {
+                        "_isScalar": false,
+                        "source": Subject {
+                          "_isScalar": false,
+                          "closed": false,
+                          "hasError": false,
+                          "isStopped": false,
+                          "observers": Array [
+                            Subscriber {
+                              "_parentOrParents": null,
+                              "_subscriptions": Array [
+                                SubjectSubscription {
+                                  "_parentOrParents": [Circular],
+                                  "_subscriptions": null,
+                                  "closed": false,
+                                  "subject": [Circular],
+                                  "subscriber": [Circular],
+                                },
+                              ],
+                              "closed": false,
+                              "destination": SafeSubscriber {
+                                "_complete": undefined,
+                                "_context": [Circular],
+                                "_error": undefined,
+                                "_next": [Function],
+                                "_parentOrParents": null,
+                                "_parentSubscriber": [Circular],
+                                "_subscriptions": null,
+                                "closed": false,
+                                "destination": Object {
+                                  "closed": true,
+                                  "complete": [Function],
+                                  "error": [Function],
+                                  "next": [Function],
+                                },
+                                "isStopped": false,
+                                "syncErrorThrowable": false,
+                                "syncErrorThrown": false,
+                                "syncErrorValue": null,
+                              },
+                              "isStopped": false,
+                              "syncErrorThrowable": true,
+                              "syncErrorThrown": false,
+                              "syncErrorValue": null,
+                            },
+                          ],
+                          "thrownError": null,
+                        },
                       }
-                      className="euiHeaderSectionItemButton"
-                      color="text"
-                      data-test-subj="toggleNavButton"
-                      onClick={[Function]}
-                    >
-                      <button
+                    }
+                    basePath={
+                      BasePath {
+                        "basePath": "/test",
+                        "get": [Function],
+                        "prepend": [Function],
+                        "publicBaseUrl": undefined,
+                        "remove": [Function],
+                        "serverBasePath": "/test",
+                      }
+                    }
+                    button={
+                      <EuiHeaderSectionItemButton
                         aria-controls="mockId"
                         aria-expanded={false}
                         aria-label="Toggle primary navigation"
                         aria-pressed={false}
-                        className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
                         data-test-subj="toggleNavButton"
-                        disabled={false}
                         onClick={[Function]}
-                        type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButtonEmpty__content"
-                          iconSide="left"
-                          iconSize="m"
-                          textProps={
-                            Object {
-                              "className": "euiButtonEmpty__text",
-                            }
-                          }
-                        >
-                          <span
-                            className="euiButtonContent euiButtonEmpty__content"
-                          >
-                            <span
-                              className="euiButtonEmpty__text"
-                            >
-                              <span
-                                className="euiHeaderSectionItemButton__content"
-                              >
-                                <EuiIcon
-                                  size="m"
-                                  type="menu"
-                                >
-                                  <span
-                                    data-euiicon-type="menu"
-                                    size="m"
-                                  />
-                                </EuiIcon>
-                              </span>
-                            </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonEmpty>
-                  </EuiHeaderSectionItemButton>
-                </div>
-              </EuiHeaderSectionItem>
-              <HeaderNavControls
-                navControls$={
-                  BehaviorSubject {
-                    "_isScalar": false,
-                    "_value": Array [],
-                    "closed": false,
-                    "hasError": false,
-                    "isStopped": false,
-                    "observers": Array [
-                      Subscriber {
-                        "_parentOrParents": null,
-                        "_subscriptions": Array [
-                          SubjectSubscription {
-                            "_parentOrParents": [Circular],
-                            "_subscriptions": null,
+                        <EuiIcon
+                          size="m"
+                          type="menu"
+                        />
+                      </EuiHeaderSectionItemButton>
+                    }
+                    closeNav={[Function]}
+                    customNavLink$={
+                      BehaviorSubject {
+                        "_isScalar": false,
+                        "_value": Object {
+                          "baseUrl": "",
+                          "href": "",
+                          "id": "cloud-deployment-link",
+                          "title": "Manage cloud deployment",
+                          "url": "",
+                        },
+                        "closed": false,
+                        "hasError": false,
+                        "isStopped": false,
+                        "observers": Array [
+                          Subscriber {
+                            "_parentOrParents": null,
+                            "_subscriptions": Array [
+                              SubjectSubscription {
+                                "_parentOrParents": [Circular],
+                                "_subscriptions": null,
+                                "closed": false,
+                                "subject": [Circular],
+                                "subscriber": [Circular],
+                              },
+                            ],
                             "closed": false,
-                            "subject": [Circular],
-                            "subscriber": [Circular],
+                            "destination": SafeSubscriber {
+                              "_complete": undefined,
+                              "_context": [Circular],
+                              "_error": undefined,
+                              "_next": [Function],
+                              "_parentOrParents": null,
+                              "_parentSubscriber": [Circular],
+                              "_subscriptions": null,
+                              "closed": false,
+                              "destination": Object {
+                                "closed": true,
+                                "complete": [Function],
+                                "error": [Function],
+                                "next": [Function],
+                              },
+                              "isStopped": false,
+                              "syncErrorThrowable": false,
+                              "syncErrorThrown": false,
+                              "syncErrorValue": null,
+                            },
+                            "isStopped": false,
+                            "syncErrorThrowable": true,
+                            "syncErrorThrown": false,
+                            "syncErrorValue": null,
                           },
                         ],
-                        "closed": false,
-                        "destination": SafeSubscriber {
-                          "_complete": undefined,
-                          "_context": [Circular],
-                          "_error": undefined,
-                          "_next": [Function],
-                          "_parentOrParents": null,
-                          "_parentSubscriber": [Circular],
-                          "_subscriptions": null,
-                          "closed": false,
-                          "destination": Object {
-                            "closed": true,
-                            "complete": [Function],
-                            "error": [Function],
-                            "next": [Function],
+                        "thrownError": null,
+                      }
+                    }
+                    homeHref="/"
+                    id="mockId"
+                    isLocked={true}
+                    isNavOpen={false}
+                    navLinks$={
+                      BehaviorSubject {
+                        "_isScalar": false,
+                        "_value": Array [
+                          Object {
+                            "baseUrl": "",
+                            "href": "",
+                            "id": "kibana",
+                            "title": "kibana",
+                            "url": "",
                           },
-                          "isStopped": false,
-                          "syncErrorThrowable": false,
-                          "syncErrorThrown": false,
-                          "syncErrorValue": null,
-                        },
-                        "isStopped": false,
-                        "syncErrorThrowable": true,
-                        "syncErrorThrown": false,
-                        "syncErrorValue": null,
-                      },
-                    ],
-                    "thrownError": null,
-                  }
-                }
-                side="left"
-              />
-            </div>
-          </EuiHeaderSection>
-          <HeaderBreadcrumbs
-            appTitle$={
-              BehaviorSubject {
-                "_isScalar": false,
-                "_value": "test",
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [
-                  Subscriber {
-                    "_parentOrParents": null,
-                    "_subscriptions": Array [
-                      SubjectSubscription {
-                        "_parentOrParents": [Circular],
-                        "_subscriptions": null,
+                        ],
                         "closed": false,
-                        "subject": [Circular],
-                        "subscriber": [Circular],
-                      },
-                    ],
-                    "closed": false,
-                    "destination": SafeSubscriber {
-                      "_complete": undefined,
-                      "_context": [Circular],
-                      "_error": undefined,
-                      "_next": [Function],
-                      "_parentOrParents": null,
-                      "_parentSubscriber": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "destination": Object {
-                        "closed": true,
-                        "complete": [Function],
-                        "error": [Function],
-                        "next": [Function],
-                      },
-                      "isStopped": false,
-                      "syncErrorThrowable": false,
-                      "syncErrorThrown": false,
-                      "syncErrorValue": null,
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": true,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                ],
-                "thrownError": null,
-              }
-            }
-            breadcrumbs$={
-              BehaviorSubject {
-                "_isScalar": false,
-                "_value": Array [
-                  Object {
-                    "text": "test",
-                  },
-                ],
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [
-                  Subscriber {
-                    "_parentOrParents": null,
-                    "_subscriptions": Array [
-                      SubjectSubscription {
-                        "_parentOrParents": [Circular],
-                        "_subscriptions": null,
-                        "closed": false,
-                        "subject": [Circular],
-                        "subscriber": [Circular],
-                      },
-                    ],
-                    "closed": false,
-                    "destination": SafeSubscriber {
-                      "_complete": undefined,
-                      "_context": [Circular],
-                      "_error": undefined,
-                      "_next": [Function],
-                      "_parentOrParents": null,
-                      "_parentSubscriber": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "destination": Object {
-                        "closed": true,
-                        "complete": [Function],
-                        "error": [Function],
-                        "next": [Function],
-                      },
-                      "isStopped": false,
-                      "syncErrorThrowable": false,
-                      "syncErrorThrown": false,
-                      "syncErrorValue": null,
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": true,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                ],
-                "thrownError": null,
-              }
-            }
-          >
-            <EuiHeaderBreadcrumbs
-              breadcrumbs={
-                Array [
-                  Object {
-                    "data-test-subj": "breadcrumb first last",
-                    "text": "test",
-                  },
-                ]
-              }
-              data-test-subj="breadcrumbs"
-              max={10}
-            >
-              <EuiBreadcrumbs
-                breadcrumbs={
-                  Array [
-                    Object {
-                      "data-test-subj": "breadcrumb first last",
-                      "text": "test",
-                    },
-                  ]
-                }
-                className="euiHeaderBreadcrumbs"
-                data-test-subj="breadcrumbs"
-                max={10}
-                truncate={true}
-              >
-                <nav
-                  aria-label="breadcrumb"
-                  className="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
-                  data-test-subj="breadcrumbs"
-                >
-                  <EuiInnerText>
-                    <span
-                      aria-current="page"
-                      className="euiBreadcrumb euiBreadcrumb--last"
-                      data-test-subj="breadcrumb first last"
-                      title="test"
-                    >
-                      test
-                    </span>
-                  </EuiInnerText>
-                </nav>
-              </EuiBreadcrumbs>
-            </EuiHeaderBreadcrumbs>
-          </HeaderBreadcrumbs>
-          <HeaderBadge
-            badge$={
-              BehaviorSubject {
-                "_isScalar": false,
-                "_value": undefined,
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [
-                  Subscriber {
-                    "_parentOrParents": null,
-                    "_subscriptions": Array [
-                      SubjectSubscription {
-                        "_parentOrParents": [Circular],
-                        "_subscriptions": null,
-                        "closed": false,
-                        "subject": [Circular],
-                        "subscriber": [Circular],
-                      },
-                    ],
-                    "closed": false,
-                    "destination": SafeSubscriber {
-                      "_complete": undefined,
-                      "_context": [Circular],
-                      "_error": undefined,
-                      "_next": [Function],
-                      "_parentOrParents": null,
-                      "_parentSubscriber": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "destination": Object {
-                        "closed": true,
-                        "complete": [Function],
-                        "error": [Function],
-                        "next": [Function],
-                      },
-                      "isStopped": false,
-                      "syncErrorThrowable": false,
-                      "syncErrorThrown": false,
-                      "syncErrorValue": null,
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": true,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                ],
-                "thrownError": null,
-              }
-            }
-          />
-          <EuiHeaderSection
-            side="right"
-          >
-            <div
-              className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--right"
-            >
-              <EuiHeaderSectionItem
-                border="none"
-              >
-                <div
-                  className="euiHeaderSectionItem"
-                >
-                  <HeaderActionMenu
-                    actionMenu$={
+                        "hasError": false,
+                        "isStopped": false,
+                        "observers": Array [
+                          Subscriber {
+                            "_parentOrParents": null,
+                            "_subscriptions": Array [
+                              SubjectSubscription {
+                                "_parentOrParents": [Circular],
+                                "_subscriptions": null,
+                                "closed": false,
+                                "subject": [Circular],
+                                "subscriber": [Circular],
+                              },
+                            ],
+                            "closed": false,
+                            "destination": SafeSubscriber {
+                              "_complete": undefined,
+                              "_context": [Circular],
+                              "_error": undefined,
+                              "_next": [Function],
+                              "_parentOrParents": null,
+                              "_parentSubscriber": [Circular],
+                              "_subscriptions": null,
+                              "closed": false,
+                              "destination": Object {
+                                "closed": true,
+                                "complete": [Function],
+                                "error": [Function],
+                                "next": [Function],
+                              },
+                              "isStopped": false,
+                              "syncErrorThrowable": false,
+                              "syncErrorThrown": false,
+                              "syncErrorValue": null,
+                            },
+                            "isStopped": false,
+                            "syncErrorThrowable": true,
+                            "syncErrorThrown": false,
+                            "syncErrorValue": null,
+                          },
+                          Subscriber {
+                            "_parentOrParents": null,
+                            "_subscriptions": Array [
+                              SubjectSubscription {
+                                "_parentOrParents": [Circular],
+                                "_subscriptions": null,
+                                "closed": false,
+                                "subject": [Circular],
+                                "subscriber": [Circular],
+                              },
+                            ],
+                            "closed": false,
+                            "destination": SafeSubscriber {
+                              "_complete": undefined,
+                              "_context": [Circular],
+                              "_error": undefined,
+                              "_next": [Function],
+                              "_parentOrParents": null,
+                              "_parentSubscriber": [Circular],
+                              "_subscriptions": null,
+                              "closed": false,
+                              "destination": Object {
+                                "closed": true,
+                                "complete": [Function],
+                                "error": [Function],
+                                "next": [Function],
+                              },
+                              "isStopped": false,
+                              "syncErrorThrowable": false,
+                              "syncErrorThrown": false,
+                              "syncErrorValue": null,
+                            },
+                            "isStopped": false,
+                            "syncErrorThrowable": true,
+                            "syncErrorThrown": false,
+                            "syncErrorValue": null,
+                          },
+                        ],
+                        "thrownError": null,
+                      }
+                    }
+                    navigateToApp={[MockFunction]}
+                    navigateToUrl={[MockFunction]}
+                    onIsLockedUpdate={[Function]}
+                    recentlyAccessed$={
                       BehaviorSubject {
                         "_isScalar": false,
-                        "_value": undefined,
+                        "_value": Array [
+                          Object {
+                            "id": "dashboard",
+                            "label": "dashboard",
+                            "link": "",
+                          },
+                        ],
                         "closed": false,
                         "hasError": false,
                         "isStopped": false,
@@ -4653,900 +4531,461 @@ exports[`Header renders 1`] = `
                       }
                     }
                   >
-                    <div
-                      data-test-subj="headerAppActionMenu"
-                    />
-                  </HeaderActionMenu>
-                </div>
-              </EuiHeaderSectionItem>
-            </div>
-          </EuiHeaderSection>
-        </div>
-      </EuiHeader>
-    </div>
-    <CollapsibleNav
-      appId$={
-        Observable {
-          "_isScalar": false,
-          "source": Subject {
-            "_isScalar": false,
-            "closed": false,
-            "hasError": false,
-            "isStopped": false,
-            "observers": Array [
-              Subscriber {
-                "_parentOrParents": null,
-                "_subscriptions": Array [
-                  SubjectSubscription {
-                    "_parentOrParents": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "subject": [Circular],
-                    "subscriber": [Circular],
-                  },
-                ],
-                "closed": false,
-                "destination": SafeSubscriber {
-                  "_complete": undefined,
-                  "_context": [Circular],
-                  "_error": undefined,
-                  "_next": [Function],
-                  "_parentOrParents": null,
-                  "_parentSubscriber": [Circular],
-                  "_subscriptions": null,
-                  "closed": false,
-                  "destination": Object {
-                    "closed": true,
-                    "complete": [Function],
-                    "error": [Function],
-                    "next": [Function],
-                  },
-                  "isStopped": false,
-                  "syncErrorThrowable": false,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-                "isStopped": false,
-                "syncErrorThrowable": true,
-                "syncErrorThrown": false,
-                "syncErrorValue": null,
-              },
-            ],
-            "thrownError": null,
-          },
-        }
-      }
-      basePath={
-        BasePath {
-          "basePath": "/test",
-          "get": [Function],
-          "prepend": [Function],
-          "publicBaseUrl": undefined,
-          "remove": [Function],
-          "serverBasePath": "/test",
-        }
-      }
-      closeNav={[Function]}
-      customNavLink$={
-        BehaviorSubject {
-          "_isScalar": false,
-          "_value": Object {
-            "baseUrl": "",
-            "href": "",
-            "id": "cloud-deployment-link",
-            "title": "Manage cloud deployment",
-            "url": "",
-          },
-          "closed": false,
-          "hasError": false,
-          "isStopped": false,
-          "observers": Array [
-            Subscriber {
-              "_parentOrParents": null,
-              "_subscriptions": Array [
-                SubjectSubscription {
-                  "_parentOrParents": [Circular],
-                  "_subscriptions": null,
-                  "closed": false,
-                  "subject": [Circular],
-                  "subscriber": [Circular],
-                },
-              ],
-              "closed": false,
-              "destination": SafeSubscriber {
-                "_complete": undefined,
-                "_context": [Circular],
-                "_error": undefined,
-                "_next": [Function],
-                "_parentOrParents": null,
-                "_parentSubscriber": [Circular],
-                "_subscriptions": null,
-                "closed": false,
-                "destination": Object {
-                  "closed": true,
-                  "complete": [Function],
-                  "error": [Function],
-                  "next": [Function],
-                },
-                "isStopped": false,
-                "syncErrorThrowable": false,
-                "syncErrorThrown": false,
-                "syncErrorValue": null,
-              },
-              "isStopped": false,
-              "syncErrorThrowable": true,
-              "syncErrorThrown": false,
-              "syncErrorValue": null,
-            },
-          ],
-          "thrownError": null,
-        }
-      }
-      homeHref="/"
-      id="mockId"
-      isLocked={true}
-      isNavOpen={false}
-      navLinks$={
-        BehaviorSubject {
-          "_isScalar": false,
-          "_value": Array [
-            Object {
-              "baseUrl": "",
-              "href": "",
-              "id": "kibana",
-              "title": "kibana",
-              "url": "",
-            },
-          ],
-          "closed": false,
-          "hasError": false,
-          "isStopped": false,
-          "observers": Array [
-            Subscriber {
-              "_parentOrParents": null,
-              "_subscriptions": Array [
-                SubjectSubscription {
-                  "_parentOrParents": [Circular],
-                  "_subscriptions": null,
-                  "closed": false,
-                  "subject": [Circular],
-                  "subscriber": [Circular],
-                },
-              ],
-              "closed": false,
-              "destination": SafeSubscriber {
-                "_complete": undefined,
-                "_context": [Circular],
-                "_error": undefined,
-                "_next": [Function],
-                "_parentOrParents": null,
-                "_parentSubscriber": [Circular],
-                "_subscriptions": null,
-                "closed": false,
-                "destination": Object {
-                  "closed": true,
-                  "complete": [Function],
-                  "error": [Function],
-                  "next": [Function],
-                },
-                "isStopped": false,
-                "syncErrorThrowable": false,
-                "syncErrorThrown": false,
-                "syncErrorValue": null,
-              },
-              "isStopped": false,
-              "syncErrorThrowable": true,
-              "syncErrorThrown": false,
-              "syncErrorValue": null,
-            },
-            Subscriber {
-              "_parentOrParents": null,
-              "_subscriptions": Array [
-                SubjectSubscription {
-                  "_parentOrParents": [Circular],
-                  "_subscriptions": null,
-                  "closed": false,
-                  "subject": [Circular],
-                  "subscriber": [Circular],
-                },
-              ],
-              "closed": false,
-              "destination": SafeSubscriber {
-                "_complete": undefined,
-                "_context": [Circular],
-                "_error": undefined,
-                "_next": [Function],
-                "_parentOrParents": null,
-                "_parentSubscriber": [Circular],
-                "_subscriptions": null,
-                "closed": false,
-                "destination": Object {
-                  "closed": true,
-                  "complete": [Function],
-                  "error": [Function],
-                  "next": [Function],
-                },
-                "isStopped": false,
-                "syncErrorThrowable": false,
-                "syncErrorThrown": false,
-                "syncErrorValue": null,
-              },
-              "isStopped": false,
-              "syncErrorThrowable": true,
-              "syncErrorThrown": false,
-              "syncErrorValue": null,
-            },
-          ],
-          "thrownError": null,
-        }
-      }
-      navigateToApp={[MockFunction]}
-      navigateToUrl={[MockFunction]}
-      onIsLockedUpdate={[Function]}
-      recentlyAccessed$={
-        BehaviorSubject {
-          "_isScalar": false,
-          "_value": Array [
-            Object {
-              "id": "dashboard",
-              "label": "dashboard",
-              "link": "",
-            },
-          ],
-          "closed": false,
-          "hasError": false,
-          "isStopped": false,
-          "observers": Array [
-            Subscriber {
-              "_parentOrParents": null,
-              "_subscriptions": Array [
-                SubjectSubscription {
-                  "_parentOrParents": [Circular],
-                  "_subscriptions": null,
-                  "closed": false,
-                  "subject": [Circular],
-                  "subscriber": [Circular],
-                },
-              ],
-              "closed": false,
-              "destination": SafeSubscriber {
-                "_complete": undefined,
-                "_context": [Circular],
-                "_error": undefined,
-                "_next": [Function],
-                "_parentOrParents": null,
-                "_parentSubscriber": [Circular],
-                "_subscriptions": null,
-                "closed": false,
-                "destination": Object {
-                  "closed": true,
-                  "complete": [Function],
-                  "error": [Function],
-                  "next": [Function],
-                },
-                "isStopped": false,
-                "syncErrorThrowable": false,
-                "syncErrorThrown": false,
-                "syncErrorValue": null,
-              },
-              "isStopped": false,
-              "syncErrorThrowable": true,
-              "syncErrorThrown": false,
-              "syncErrorValue": null,
-            },
-          ],
-          "thrownError": null,
-        }
-      }
-    >
-      <EuiCollapsibleNav
-        aria-label="Primary"
-        data-test-subj="collapsibleNav"
-        id="mockId"
-        isDocked={true}
-        isOpen={false}
-        onClose={[Function]}
-      >
-        <EuiFlyout
-          aria-label="Primary"
-          as="nav"
-          className="euiCollapsibleNav"
-          closeButtonPosition="outside"
-          data-test-subj="collapsibleNav"
-          hideCloseButton={true}
-          id="mockId"
-          onClose={[Function]}
-          outsideClickCloses={true}
-          ownFocus={true}
-          paddingSize="none"
-          pushMinBreakpoint="l"
-          role={null}
-          side="left"
-          size={320}
-          type="push"
-        >
-          <nav
-            data-eui="EuiFlyout"
-            data-test-subj="collapsibleNav"
-            role={null}
-          >
-            <EuiFlexItem
-              grow={false}
-              style={
-                Object {
-                  "flexShrink": 0,
-                }
-              }
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-                style={
-                  Object {
-                    "flexShrink": 0,
-                  }
-                }
-              >
-                <EuiCollapsibleNavGroup
-                  background="light"
-                  className="eui-yScroll"
-                  style={
-                    Object {
-                      "maxHeight": "40vh",
-                    }
-                  }
-                >
-                  <div
-                    className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                    id="mockId"
-                    style={
-                      Object {
-                        "maxHeight": "40vh",
+                    <EuiCollapsibleNav
+                      aria-label="Primary"
+                      button={
+                        <EuiHeaderSectionItemButton
+                          aria-controls="mockId"
+                          aria-expanded={false}
+                          aria-label="Toggle primary navigation"
+                          aria-pressed={false}
+                          data-test-subj="toggleNavButton"
+                          onClick={[Function]}
+                        >
+                          <EuiIcon
+                            size="m"
+                            type="menu"
+                          />
+                        </EuiHeaderSectionItemButton>
                       }
-                    }
-                  >
-                    <div
-                      className="euiCollapsibleNavGroup__children"
+                      data-test-subj="collapsibleNav"
+                      id="mockId"
+                      isOpen={false}
+                      onClose={[Function]}
+                      ownFocus={false}
+                      size={240}
                     >
-                      <EuiListGroup
-                        color="text"
-                        gutterSize="none"
-                        listItems={
-                          Array [
-                            Object {
-                              "data-test-subj": "collapsibleNavCustomNavLink",
-                              "href": "",
-                              "icon": undefined,
-                              "iconType": undefined,
-                              "isActive": false,
-                              "isDisabled": undefined,
-                              "label": "Manage cloud deployment",
-                              "onClick": [Function],
-                            },
-                          ]
-                        }
-                        maxWidth="none"
-                        size="s"
+                      <EuiHeaderSectionItemButton
+                        aria-controls="mockId"
+                        aria-expanded={false}
+                        aria-label="Toggle primary navigation"
+                        aria-pressed={false}
+                        data-test-subj="toggleNavButton"
+                        onClick={[Function]}
+                        onMouseUpCapture={[Function]}
+                        onTouchEnd={[Function]}
                       >
-                        <ul
-                          className="euiListGroup"
-                          style={
+                        <EuiButtonEmpty
+                          aria-controls="mockId"
+                          aria-expanded={false}
+                          aria-label="Toggle primary navigation"
+                          aria-pressed={false}
+                          buttonRef={
                             Object {
-                              "maxWidth": "none",
-                            }
-                          }
-                        >
-                          <EuiListGroupItem
-                            color="text"
-                            data-test-subj="collapsibleNavCustomNavLink"
-                            href=""
-                            isActive={false}
-                            key="title-0"
-                            label="Manage cloud deployment"
-                            onClick={[Function]}
-                            showToolTip={false}
-                            size="s"
-                            wrapText={false}
-                          >
-                            <li
-                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                            >
-                              <button
-                                className="euiListGroupItem__button"
-                                data-test-subj="collapsibleNavCustomNavLink"
-                                disabled={false}
-                                onClick={[Function]}
+                              "current": <button
+                                aria-controls="mockId"
+                                aria-expanded="false"
+                                aria-label="Toggle primary navigation"
+                                aria-pressed="false"
+                                class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
+                                data-test-subj="toggleNavButton"
                                 type="button"
                               >
                                 <span
-                                  className="euiListGroupItem__label"
-                                  title="Manage cloud deployment"
+                                  class="euiButtonContent euiButtonEmpty__content"
                                 >
-                                  Manage cloud deployment
+                                  <span
+                                    class="euiButtonEmpty__text"
+                                  >
+                                    <span
+                                      class="euiHeaderSectionItemButton__content"
+                                    >
+                                      <span
+                                        data-euiicon-type="menu"
+                                      />
+                                    </span>
+                                  </span>
                                 </span>
-                              </button>
-                            </li>
-                          </EuiListGroupItem>
-                        </ul>
-                      </EuiListGroup>
-                    </div>
-                  </div>
-                </EuiCollapsibleNavGroup>
-              </div>
-            </EuiFlexItem>
-            <EuiHorizontalRule
-              margin="none"
-            >
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full"
-              />
-            </EuiHorizontalRule>
-            <EuiFlexItem
-              grow={false}
-              style={
-                Object {
-                  "flexShrink": 0,
-                }
-              }
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-                style={
-                  Object {
-                    "flexShrink": 0,
-                  }
-                }
-              >
-                <EuiCollapsibleNavGroup
-                  background="light"
-                  className="eui-yScroll"
-                  style={
-                    Object {
-                      "maxHeight": "40vh",
-                    }
-                  }
-                >
-                  <div
-                    className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                    id="mockId"
-                    style={
-                      Object {
-                        "maxHeight": "40vh",
-                      }
-                    }
-                  >
-                    <div
-                      className="euiCollapsibleNavGroup__children"
-                    >
-                      <EuiListGroup
-                        aria-label="Pinned links"
-                        color="text"
-                        gutterSize="none"
-                        listItems={
-                          Array [
-                            Object {
-                              "data-test-subj": "homeLink",
-                              "href": "/",
-                              "iconType": "home",
-                              "label": "Home",
-                              "onClick": [Function],
-                            },
-                          ]
-                        }
-                        maxWidth="none"
-                        size="s"
-                      >
-                        <ul
-                          aria-label="Pinned links"
-                          className="euiListGroup"
-                          style={
-                            Object {
-                              "maxWidth": "none",
+                              </button>,
                             }
                           }
+                          className="euiHeaderSectionItemButton"
+                          color="text"
+                          data-test-subj="toggleNavButton"
+                          onClick={[Function]}
+                          onMouseUpCapture={[Function]}
+                          onTouchEnd={[Function]}
                         >
-                          <EuiListGroupItem
-                            color="text"
-                            data-test-subj="homeLink"
-                            href="/"
-                            iconType="home"
-                            key="title-0"
-                            label="Home"
+                          <button
+                            aria-controls="mockId"
+                            aria-expanded={false}
+                            aria-label="Toggle primary navigation"
+                            aria-pressed={false}
+                            className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
+                            data-test-subj="toggleNavButton"
+                            disabled={false}
                             onClick={[Function]}
-                            showToolTip={false}
-                            size="s"
-                            wrapText={false}
+                            onMouseUpCapture={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
                           >
-                            <li
-                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="m"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
-                              <a
-                                className="euiListGroupItem__button"
-                                data-test-subj="homeLink"
-                                href="/"
-                                onClick={[Function]}
-                                rel="noreferrer"
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <EuiIcon
-                                  className="euiListGroupItem__icon"
-                                  color="inherit"
-                                  type="home"
-                                >
-                                  <span
-                                    className="euiListGroupItem__icon"
-                                    color="inherit"
-                                    data-euiicon-type="home"
-                                  />
-                                </EuiIcon>
                                 <span
-                                  className="euiListGroupItem__label"
-                                  title="Home"
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Home
+                                  <span
+                                    className="euiHeaderSectionItemButton__content"
+                                  >
+                                    <EuiIcon
+                                      size="m"
+                                      type="menu"
+                                    >
+                                      <span
+                                        data-euiicon-type="menu"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                  </span>
                                 </span>
-                              </a>
-                            </li>
-                          </EuiListGroupItem>
-                        </ul>
-                      </EuiListGroup>
-                    </div>
-                  </div>
-                </EuiCollapsibleNavGroup>
-              </div>
-            </EuiFlexItem>
-            <EuiCollapsibleNavGroup
-              background="light"
-              data-test-subj="collapsibleNavGroup-recentlyViewed"
-              initialIsOpen={true}
-              isCollapsible={true}
-              key="recentlyViewed"
-              onToggle={[Function]}
-              title="Recently viewed"
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </EuiHeaderSectionItemButton>
+                    </EuiCollapsibleNav>
+                  </CollapsibleNav>
+                </div>
+              </EuiHeaderSectionItem>
+              <HeaderNavControls
+                navControls$={
+                  BehaviorSubject {
+                    "_isScalar": false,
+                    "_value": Array [],
+                    "closed": false,
+                    "hasError": false,
+                    "isStopped": false,
+                    "observers": Array [
+                      Subscriber {
+                        "_parentOrParents": null,
+                        "_subscriptions": Array [
+                          SubjectSubscription {
+                            "_parentOrParents": [Circular],
+                            "_subscriptions": null,
+                            "closed": false,
+                            "subject": [Circular],
+                            "subscriber": [Circular],
+                          },
+                        ],
+                        "closed": false,
+                        "destination": SafeSubscriber {
+                          "_complete": undefined,
+                          "_context": [Circular],
+                          "_error": undefined,
+                          "_next": [Function],
+                          "_parentOrParents": null,
+                          "_parentSubscriber": [Circular],
+                          "_subscriptions": null,
+                          "closed": false,
+                          "destination": Object {
+                            "closed": true,
+                            "complete": [Function],
+                            "error": [Function],
+                            "next": [Function],
+                          },
+                          "isStopped": false,
+                          "syncErrorThrowable": false,
+                          "syncErrorThrown": false,
+                          "syncErrorValue": null,
+                        },
+                        "isStopped": false,
+                        "syncErrorThrowable": true,
+                        "syncErrorThrown": false,
+                        "syncErrorValue": null,
+                      },
+                    ],
+                    "thrownError": null,
+                  }
+                }
+                side="left"
+              />
+            </div>
+          </EuiHeaderSection>
+          <HeaderBreadcrumbs
+            appTitle$={
+              BehaviorSubject {
+                "_isScalar": false,
+                "_value": "test",
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
+                    "_parentOrParents": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
+                    "closed": false,
+                    "destination": SafeSubscriber {
+                      "_complete": undefined,
+                      "_context": [Circular],
+                      "_error": undefined,
+                      "_next": [Function],
+                      "_parentOrParents": null,
+                      "_parentSubscriber": [Circular],
+                      "_subscriptions": null,
+                      "closed": false,
+                      "destination": Object {
+                        "closed": true,
+                        "complete": [Function],
+                        "error": [Function],
+                        "next": [Function],
+                      },
+                      "isStopped": false,
+                      "syncErrorThrowable": false,
+                      "syncErrorThrown": false,
+                      "syncErrorValue": null,
+                    },
+                    "isStopped": false,
+                    "syncErrorThrowable": true,
+                    "syncErrorThrown": false,
+                    "syncErrorValue": null,
+                  },
+                ],
+                "thrownError": null,
+              }
+            }
+            breadcrumbs$={
+              BehaviorSubject {
+                "_isScalar": false,
+                "_value": Array [
+                  Object {
+                    "text": "test",
+                  },
+                ],
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
+                    "_parentOrParents": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
+                    "closed": false,
+                    "destination": SafeSubscriber {
+                      "_complete": undefined,
+                      "_context": [Circular],
+                      "_error": undefined,
+                      "_next": [Function],
+                      "_parentOrParents": null,
+                      "_parentSubscriber": [Circular],
+                      "_subscriptions": null,
+                      "closed": false,
+                      "destination": Object {
+                        "closed": true,
+                        "complete": [Function],
+                        "error": [Function],
+                        "next": [Function],
+                      },
+                      "isStopped": false,
+                      "syncErrorThrowable": false,
+                      "syncErrorThrown": false,
+                      "syncErrorValue": null,
+                    },
+                    "isStopped": false,
+                    "syncErrorThrowable": true,
+                    "syncErrorThrown": false,
+                    "syncErrorValue": null,
+                  },
+                ],
+                "thrownError": null,
+              }
+            }
+          >
+            <EuiHeaderBreadcrumbs
+              breadcrumbs={
+                Array [
+                  Object {
+                    "data-test-subj": "breadcrumb first last",
+                    "text": "test",
+                  },
+                ]
+              }
+              data-test-subj="breadcrumbs"
+              max={10}
             >
-              <EuiAccordion
-                arrowDisplay="right"
-                buttonClassName="euiCollapsibleNavGroup__heading"
-                buttonContent={
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="m"
-                    responsive={false}
-                  >
-                    <EuiFlexItem>
-                      <EuiTitle
-                        size="xxs"
-                      >
-                        <h3
-                          className="euiCollapsibleNavGroup__title"
-                          id="mockId__title"
-                        >
-                          Recently viewed
-                        </h3>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
+              <EuiBreadcrumbs
+                breadcrumbs={
+                  Array [
+                    Object {
+                      "data-test-subj": "breadcrumb first last",
+                      "text": "test",
+                    },
+                  ]
                 }
-                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                data-test-subj="collapsibleNavGroup-recentlyViewed"
-                id="mockId"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                onToggle={[Function]}
-                paddingSize="none"
+                className="euiHeaderBreadcrumbs"
+                data-test-subj="breadcrumbs"
+                max={10}
+                truncate={true}
               >
-                <div
-                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                  data-test-subj="collapsibleNavGroup-recentlyViewed"
-                  onToggle={[Function]}
+                <nav
+                  aria-label="breadcrumb"
+                  className="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
+                  data-test-subj="breadcrumbs"
                 >
-                  <div
-                    className="euiAccordion__triggerWrapper"
-                  >
-                    <button
-                      aria-controls="mockId"
-                      aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                      id="mockId"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                          >
-                            <EuiFlexItem>
-                              <div
-                                className="euiFlexItem"
-                              >
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Recently viewed
-                                  </h3>
-                                </EuiTitle>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="mockId"
-                    className="euiAccordion__childWrapper"
-                    id="mockId"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
+                  <EuiInnerText>
+                    <span
+                      aria-current="page"
+                      className="euiBreadcrumb euiBreadcrumb--last"
+                      data-test-subj="breadcrumb first last"
+                      title="test"
                     >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              aria-label="Recently viewed links"
-                              className="kbnCollapsibleNav__recentsListGroup"
-                              color="subdued"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "aria-label": "dashboard, type: kibana",
-                                    "data-test-subj": "collapsibleNavAppLink--recent",
-                                    "href": "http://localhost/",
-                                    "label": "dashboard",
-                                    "onClick": [Function],
-                                    "title": "dashboard, type: kibana",
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                aria-label="Recently viewed links"
-                                className="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
-                              >
-                                <EuiListGroupItem
-                                  aria-label="dashboard, type: kibana"
-                                  color="subdued"
-                                  data-test-subj="collapsibleNavAppLink--recent"
-                                  href="http://localhost/"
-                                  key="title-0"
-                                  label="dashboard"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  title="dashboard, type: kibana"
-                                  wrapText={false}
-                                >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      aria-label="dashboard, type: kibana"
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink--recent"
-                                      href="http://localhost/"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                      title="dashboard, type: kibana"
-                                    >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="dashboard"
-                                      >
-                                        dashboard
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </div>
-                    </EuiResizeObserver>
-                  </div>
-                </div>
-              </EuiAccordion>
-            </EuiCollapsibleNavGroup>
-            <EuiHorizontalRule
-              margin="none"
-            >
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full"
-              />
-            </EuiHorizontalRule>
-            <EuiFlexItem
-              className="eui-yScroll"
+                      test
+                    </span>
+                  </EuiInnerText>
+                </nav>
+              </EuiBreadcrumbs>
+            </EuiHeaderBreadcrumbs>
+          </HeaderBreadcrumbs>
+          <HeaderBadge
+            badge$={
+              BehaviorSubject {
+                "_isScalar": false,
+                "_value": undefined,
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
+                    "_parentOrParents": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
+                    "closed": false,
+                    "destination": SafeSubscriber {
+                      "_complete": undefined,
+                      "_context": [Circular],
+                      "_error": undefined,
+                      "_next": [Function],
+                      "_parentOrParents": null,
+                      "_parentSubscriber": [Circular],
+                      "_subscriptions": null,
+                      "closed": false,
+                      "destination": Object {
+                        "closed": true,
+                        "complete": [Function],
+                        "error": [Function],
+                        "next": [Function],
+                      },
+                      "isStopped": false,
+                      "syncErrorThrowable": false,
+                      "syncErrorThrown": false,
+                      "syncErrorValue": null,
+                    },
+                    "isStopped": false,
+                    "syncErrorThrowable": true,
+                    "syncErrorThrown": false,
+                    "syncErrorValue": null,
+                  },
+                ],
+                "thrownError": null,
+              }
+            }
+          />
+          <EuiHeaderSection
+            side="right"
+          >
+            <div
+              className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--right"
             >
-              <div
-                className="euiFlexItem eui-yScroll"
+              <EuiHeaderSectionItem
+                border="none"
               >
-                <EuiCollapsibleNavGroup
-                  data-test-subj="collapsibleNavGroup-noCategory"
-                  key="0"
+                <div
+                  className="euiHeaderSectionItem"
                 >
-                  <div
-                    className="euiCollapsibleNavGroup"
-                    data-test-subj="collapsibleNavGroup-noCategory"
-                    id="mockId"
+                  <HeaderActionMenu
+                    actionMenu$={
+                      BehaviorSubject {
+                        "_isScalar": false,
+                        "_value": undefined,
+                        "closed": false,
+                        "hasError": false,
+                        "isStopped": false,
+                        "observers": Array [
+                          Subscriber {
+                            "_parentOrParents": null,
+                            "_subscriptions": Array [
+                              SubjectSubscription {
+                                "_parentOrParents": [Circular],
+                                "_subscriptions": null,
+                                "closed": false,
+                                "subject": [Circular],
+                                "subscriber": [Circular],
+                              },
+                            ],
+                            "closed": false,
+                            "destination": SafeSubscriber {
+                              "_complete": undefined,
+                              "_context": [Circular],
+                              "_error": undefined,
+                              "_next": [Function],
+                              "_parentOrParents": null,
+                              "_parentSubscriber": [Circular],
+                              "_subscriptions": null,
+                              "closed": false,
+                              "destination": Object {
+                                "closed": true,
+                                "complete": [Function],
+                                "error": [Function],
+                                "next": [Function],
+                              },
+                              "isStopped": false,
+                              "syncErrorThrowable": false,
+                              "syncErrorThrown": false,
+                              "syncErrorValue": null,
+                            },
+                            "isStopped": false,
+                            "syncErrorThrowable": true,
+                            "syncErrorThrown": false,
+                            "syncErrorValue": null,
+                          },
+                        ],
+                        "thrownError": null,
+                      }
+                    }
                   >
                     <div
-                      className="euiCollapsibleNavGroup__children"
-                    >
-                      <EuiListGroup
-                        flush={true}
-                      >
-                        <ul
-                          className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                        >
-                          <EuiListGroupItem
-                            color="text"
-                            data-test-subj="collapsibleNavAppLink"
-                            href=""
-                            isActive={false}
-                            label="kibana"
-                            onClick={[Function]}
-                            size="s"
-                          >
-                            <li
-                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                            >
-                              <button
-                                className="euiListGroupItem__button"
-                                data-test-subj="collapsibleNavAppLink"
-                                disabled={false}
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiListGroupItem__label"
-                                  title="kibana"
-                                >
-                                  kibana
-                                </span>
-                              </button>
-                            </li>
-                          </EuiListGroupItem>
-                        </ul>
-                      </EuiListGroup>
-                    </div>
-                  </div>
-                </EuiCollapsibleNavGroup>
-                <EuiShowFor
-                  sizes={
-                    Array [
-                      "l",
-                      "xl",
-                    ]
-                  }
-                >
-                  <EuiCollapsibleNavGroup>
-                    <div
-                      className="euiCollapsibleNavGroup"
-                      id="mockId"
-                    >
-                      <div
-                        className="euiCollapsibleNavGroup__children"
-                      >
-                        <EuiListGroup
-                          flush={true}
-                        >
-                          <ul
-                            className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                          >
-                            <EuiListGroupItem
-                              aria-label="Undock primary navigation"
-                              buttonRef={
-                                Object {
-                                  "current": <button
-                                    aria-label="Undock primary navigation"
-                                    class="euiListGroupItem__button"
-                                    data-test-subj="collapsible-nav-lock"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiListGroupItem__icon"
-                                      color="inherit"
-                                      data-euiicon-type="lock"
-                                    />
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="Undock navigation"
-                                    >
-                                      Undock navigation
-                                    </span>
-                                  </button>,
-                                }
-                              }
-                              color="subdued"
-                              data-test-subj="collapsible-nav-lock"
-                              iconType="lock"
-                              label="Undock navigation"
-                              onClick={[Function]}
-                              size="xs"
-                            >
-                              <li
-                                className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                              >
-                                <button
-                                  aria-label="Undock primary navigation"
-                                  className="euiListGroupItem__button"
-                                  data-test-subj="collapsible-nav-lock"
-                                  disabled={false}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    className="euiListGroupItem__icon"
-                                    color="inherit"
-                                    type="lock"
-                                  >
-                                    <span
-                                      className="euiListGroupItem__icon"
-                                      color="inherit"
-                                      data-euiicon-type="lock"
-                                    />
-                                  </EuiIcon>
-                                  <span
-                                    className="euiListGroupItem__label"
-                                    title="Undock navigation"
-                                  >
-                                    Undock navigation
-                                  </span>
-                                </button>
-                              </li>
-                            </EuiListGroupItem>
-                          </ul>
-                        </EuiListGroup>
-                      </div>
-                    </div>
-                  </EuiCollapsibleNavGroup>
-                </EuiShowFor>
-              </div>
-            </EuiFlexItem>
-          </nav>
-        </EuiFlyout>
-      </EuiCollapsibleNav>
-    </CollapsibleNav>
+                      data-test-subj="headerAppActionMenu"
+                    />
+                  </HeaderActionMenu>
+                </div>
+              </EuiHeaderSectionItem>
+            </div>
+          </EuiHeaderSection>
+        </div>
+      </EuiHeader>
+    </div>
   </header>
 </Header>
 `;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index 460770744d53a..e69ac65b59850 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -56,6 +56,7 @@ function mockProps() {
     navigateToApp: () => Promise.resolve(),
     navigateToUrl: () => Promise.resolve(),
     customNavLink$: new BehaviorSubject(undefined),
+    button: <button />,
   };
 }
 
@@ -76,19 +77,20 @@ function clickGroup(component: ReactWrapper, group: string) {
 describe('CollapsibleNav', () => {
   // this test is mostly an "EUI works as expected" sanity check
   it('renders the default nav', () => {
-    const onLock = sinon.spy();
-    const component = mount(<CollapsibleNav {...mockProps()} onIsLockedUpdate={onLock} />);
+    // Removing Locking ability without totally removing
+    // const onLock = sinon.spy();
+    const component = mount(<CollapsibleNav {...mockProps()} />);
     expect(component).toMatchSnapshot();
 
     component.setProps({ isOpen: true });
     expect(component).toMatchSnapshot();
 
-    component.setProps({ isLocked: true });
-    expect(component).toMatchSnapshot();
+    // component.setProps({ isLocked: true });
+    // expect(component).toMatchSnapshot();
 
-    // limit the find to buttons because jest also renders data-test-subj on a JSX wrapper element
-    component.find('button[data-test-subj="collapsible-nav-lock"]').simulate('click');
-    expect(onLock.callCount).toEqual(1);
+    // // limit the find to buttons because jest also renders data-test-subj on a JSX wrapper element
+    // component.find('button[data-test-subj="collapsible-nav-lock"]').simulate('click');
+    // expect(onLock.callCount).toEqual(1);
   });
 
   it('renders links grouped by category', () => {
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index 0e85dbea237cb..016261914439a 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -15,7 +15,8 @@ import {
   EuiListGroup,
   EuiListGroupItem,
   EuiShowFor,
-  EuiText,
+  EuiCollapsibleNavProps,
+  EuiButton,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { groupBy, sortBy } from 'lodash';
@@ -78,6 +79,7 @@ interface Props {
   navigateToApp: InternalApplicationStart['navigateToApp'];
   navigateToUrl: InternalApplicationStart['navigateToUrl'];
   customNavLink$: Rx.Observable<ChromeNavLink | undefined>;
+  button: EuiCollapsibleNavProps['button'];
 }
 
 export function CollapsibleNav({
@@ -91,6 +93,7 @@ export function CollapsibleNav({
   closeNav,
   navigateToApp,
   navigateToUrl,
+  button,
   ...observables
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
@@ -121,8 +124,10 @@ export function CollapsibleNav({
         defaultMessage: 'Primary',
       })}
       isOpen={isNavOpen}
-      isDocked={isLocked}
       onClose={closeNav}
+      button={button}
+      ownFocus={false}
+      size={240}
     >
       {customNavLink && (
         <Fragment>
@@ -192,16 +197,18 @@ export function CollapsibleNav({
       </EuiFlexItem>
 
       {/* Recently viewed */}
-      <EuiCollapsibleNavGroup
-        key="recentlyViewed"
-        background="light"
-        title={i18n.translate('core.ui.recentlyViewed', { defaultMessage: 'Recently viewed' })}
-        isCollapsible={true}
-        initialIsOpen={getIsCategoryOpen('recentlyViewed', storage)}
-        onToggle={(isCategoryOpen) => setIsCategoryOpen('recentlyViewed', isCategoryOpen, storage)}
-        data-test-subj="collapsibleNavGroup-recentlyViewed"
-      >
-        {recentlyAccessed.length > 0 ? (
+      {recentlyAccessed.length > 0 && (
+        <EuiCollapsibleNavGroup
+          key="recentlyViewed"
+          background="light"
+          title={i18n.translate('core.ui.recentlyViewed', { defaultMessage: 'Recently viewed' })}
+          isCollapsible={true}
+          initialIsOpen={getIsCategoryOpen('recentlyViewed', storage)}
+          onToggle={(isCategoryOpen) =>
+            setIsCategoryOpen('recentlyViewed', isCategoryOpen, storage)
+          }
+          data-test-subj="collapsibleNavGroup-recentlyViewed"
+        >
           <EuiListGroup
             aria-label={i18n.translate('core.ui.recentlyViewedAriaLabel', {
               defaultMessage: 'Recently viewed links',
@@ -233,16 +240,8 @@ export function CollapsibleNav({
             size="s"
             className="kbnCollapsibleNav__recentsListGroup"
           />
-        ) : (
-          <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
-            <p>
-              {i18n.translate('core.ui.EmptyRecentlyViewed', {
-                defaultMessage: 'No recently viewed items',
-              })}
-            </p>
-          </EuiText>
-        )}
-      </EuiCollapsibleNavGroup>
+        </EuiCollapsibleNavGroup>
+      )}
 
       <EuiHorizontalRule margin="none" />
 
@@ -255,6 +254,7 @@ export function CollapsibleNav({
             <EuiCollapsibleNavGroup
               key={category.id}
               iconType={category.euiIconType}
+              iconSize="m"
               title={category.label}
               isCollapsible={true}
               initialIsOpen={getIsCategoryOpen(category.id, storage)}
@@ -286,7 +286,7 @@ export function CollapsibleNav({
         ))}
 
         {/* Docking button only for larger screens that can support it*/}
-        <EuiShowFor sizes={['l', 'xl']}>
+        <EuiShowFor sizes={'none'}>
           <EuiCollapsibleNavGroup>
             <EuiListGroup flush>
               <EuiListGroupItem
@@ -324,6 +324,16 @@ export function CollapsibleNav({
           </EuiCollapsibleNavGroup>
         </EuiShowFor>
       </EuiFlexItem>
+      {/* Quick addition of that "ADD DATA" button everyone wants :) Feel free to remove though. */}
+      <EuiFlexItem grow={false}>
+        {/* Span fakes the nav group into not being the first item and therefore adding a top border */}
+        <span />
+        <EuiCollapsibleNavGroup>
+          <EuiButton fill fullWidth iconType="plusInCircleFilled">
+            Add Data
+          </EuiButton>
+        </EuiCollapsibleNavGroup>
+      </EuiFlexItem>
     </EuiCollapsibleNav>
   );
 }
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 246ca83ef5ade..a401195b38942 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -160,19 +160,41 @@ export function Header({
           <EuiHeader position="fixed" className="header__secondBar">
             <EuiHeaderSection grow={false}>
               <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
-                <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}
-                >
-                  <EuiIcon type="menu" size="m" />
-                </EuiHeaderSectionItemButton>
+                <CollapsibleNav
+                  appId$={application.currentAppId$}
+                  id={navId}
+                  isLocked={isLocked}
+                  navLinks$={observables.navLinks$}
+                  recentlyAccessed$={observables.recentlyAccessed$}
+                  isNavOpen={isNavOpen}
+                  homeHref={homeHref}
+                  basePath={basePath}
+                  navigateToApp={application.navigateToApp}
+                  navigateToUrl={application.navigateToUrl}
+                  onIsLockedUpdate={onIsLockedUpdate}
+                  closeNav={() => {
+                    setIsNavOpen(false);
+                    if (toggleCollapsibleNavRef.current) {
+                      toggleCollapsibleNavRef.current.focus();
+                    }
+                  }}
+                  customNavLink$={observables.customNavLink$}
+                  button={
+                    <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}
+                    >
+                      <EuiIcon type="menu" size="m" />
+                    </EuiHeaderSectionItemButton>
+                  }
+                />
               </EuiHeaderSectionItem>
 
               <HeaderNavControls side="left" navControls$={observables.navControlsLeft$} />
@@ -205,27 +227,6 @@ export function Header({
             </EuiHeaderSection>
           </EuiHeader>
         </div>
-
-        <CollapsibleNav
-          appId$={application.currentAppId$}
-          id={navId}
-          isLocked={isLocked}
-          navLinks$={observables.navLinks$}
-          recentlyAccessed$={observables.recentlyAccessed$}
-          isNavOpen={isNavOpen}
-          homeHref={homeHref}
-          basePath={basePath}
-          navigateToApp={application.navigateToApp}
-          navigateToUrl={application.navigateToUrl}
-          onIsLockedUpdate={onIsLockedUpdate}
-          closeNav={() => {
-            setIsNavOpen(false);
-            if (toggleCollapsibleNavRef.current) {
-              toggleCollapsibleNavRef.current.focus();
-            }
-          }}
-          customNavLink$={observables.customNavLink$}
-        />
       </header>
     </>
   );

From b9d8e1bdce071f7e624e24ea2f3ac507b4d3d365 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Thu, 24 Jun 2021 17:58:14 -0400
Subject: [PATCH 10/26] solution nav a11y fixes

---
 .../solution_nav/solution_nav.tsx             | 31 +++++++++++++++----
 .../solution_nav_collapse_button.tsx          |  9 ++++--
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index 83b893cde0be3..aa3d20499888f 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -10,7 +10,13 @@ import './solution_nav.scss';
 import React, { FunctionComponent, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiFlyout, EuiSideNav, EuiSideNavProps, useIsWithinBreakpoints } from '@elastic/eui';
+import {
+  EuiFlyout,
+  EuiSideNav,
+  EuiSideNavItemType,
+  EuiSideNavProps,
+  useIsWithinBreakpoints,
+} from '@elastic/eui';
 
 import classNames from 'classnames';
 import {
@@ -35,6 +41,16 @@ export type KibanaPageTemplateSolutionNavProps = Partial<EuiSideNavProps> & {
   onCollapse?: () => void;
 };
 
+const negativeTabIndex = (items: Array<EuiSideNavItemType<{}>>) => {
+  return items.map((item) => {
+    // TODO need EUI support
+    // @ts-ignore
+    item.tabIndex = -1;
+    item.items = item.items && negativeTabIndex(item.items);
+    return item;
+  });
+};
+
 /**
  * A wrapper around EuiSideNav but also creates the appropriate title with optional solution logo
  */
@@ -52,11 +68,13 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
 
   // This is used for both the EuiSideNav and EuiFlyout toggling
-  const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
+  const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
   const toggleOpenOnMobile = () => {
-    setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
+    setIsSideNavOpenOnMobile(!isSideNavOpenOnMobile);
   };
 
+  const isHidden = isLargerBreakpoint && !isOpenOnDesktop;
+
   /**
    * Create the avatar
    */
@@ -88,11 +106,12 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   let sideNav;
   if (items) {
     const sideNavClasses = classNames('kbnPageTemplateSolutionNav', {
-      'kbnPageTemplateSolutionNav--hidden': isLargerBreakpoint && !isOpenOnDesktop,
+      'kbnPageTemplateSolutionNav--hidden': isHidden,
     });
 
     sideNav = (
       <EuiSideNav
+        aria-hidden={isHidden}
         className={sideNavClasses}
         heading={titleText}
         mobileTitle={
@@ -103,7 +122,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
         }
         toggleOpenOnMobile={toggleOpenOnMobile}
         isOpenOnMobile={isSideNavOpenOnMobile}
-        items={items}
+        items={isHidden ? negativeTabIndex(items) : items}
         {...rest}
       />
     );
@@ -118,7 +137,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
             <EuiFlyout
               ownFocus={false}
               outsideClickCloses
-              onClose={() => setisSideNavOpenOnMobile(false)}
+              onClose={() => setIsSideNavOpenOnMobile(false)}
               side="left"
               size={240}
               closeButtonPosition="outside"
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
index 09b49a23ba060..56b5c224025ab 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -11,6 +11,7 @@ import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 export type KibanaPageTemplateSolutionNavCollapseButtonProps = Partial<EuiButtonIconPropsForButton> & {
   /**
@@ -35,6 +36,10 @@ export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<Kiba
     className
   );
 
+  const label = i18n.translate('kibana-react.solutionNav.collapsibleLabel', {
+    defaultMessage: 'Collapse side navigation',
+  });
+
   return (
     <EuiButtonIcon
       className={classes}
@@ -42,8 +47,8 @@ export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<Kiba
       size="s"
       display="fill"
       color="text"
-      aria-label="Collapse side navigation"
-      title="Collapse side navigation"
+      aria-label={label}
+      title={label}
       {...rest}
     />
   );

From 5b4ebcdf8c113edf573bf544ee599f417ec8b017 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 09:07:12 -0400
Subject: [PATCH 11/26] cleanup jest tests, change animation, fix some i18n

---
 .../chrome/ui/header/collapsible_nav.tsx      |   6 +-
 .../__snapshots__/page_template.test.tsx.snap |   7 +
 .../__snapshots__/solution_nav.test.tsx.snap  | 255 +-----------------
 .../solution_nav_collapse_button.scss         |   2 +-
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 6 files changed, 16 insertions(+), 256 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index 016261914439a..cb010268f76a5 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -19,6 +19,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { groupBy, sortBy } from 'lodash';
 import React, { Fragment, useRef } from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -330,7 +331,10 @@ export function CollapsibleNav({
         <span />
         <EuiCollapsibleNavGroup>
           <EuiButton fill fullWidth iconType="plusInCircleFilled">
-            Add Data
+            <FormattedMessage
+              id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
+              defaultMessage="Add Data"
+            />
           </EuiButton>
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>
diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
index a80e3a67fb2db..71d034d32bd1b 100644
--- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`KibanaPageTemplate render basic template 1`] = `
   pageSideBarProps={
     Object {
       "className": "kbnPageTemplate__pageSideBar",
+      "paddingSize": "l",
     }
   }
   restrictWidth={true}
@@ -28,6 +29,7 @@ exports[`KibanaPageTemplate render custom empty prompt only 1`] = `
   pageSideBarProps={
     Object {
       "className": "kbnPageTemplate__pageSideBar",
+      "paddingSize": "l",
     }
   }
   restrictWidth={true}
@@ -59,6 +61,7 @@ exports[`KibanaPageTemplate render custom empty prompt with page header 1`] = `
   pageSideBarProps={
     Object {
       "className": "kbnPageTemplate__pageSideBar",
+      "paddingSize": "l",
     }
   }
   restrictWidth={true}
@@ -80,6 +83,7 @@ exports[`KibanaPageTemplate render default empty prompt 1`] = `
   pageSideBarProps={
     Object {
       "className": "kbnPageTemplate__pageSideBar",
+      "paddingSize": "l",
     }
   }
   restrictWidth={true}
@@ -118,6 +122,7 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
   pageSideBar={
     <KibanaPageTemplateSolutionNav
       icon="solution"
+      isOpenOnDesktop={true}
       items={
         Array [
           Object {
@@ -159,11 +164,13 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
         ]
       }
       name="Solution"
+      onCollapse={[Function]}
     />
   }
   pageSideBarProps={
     Object {
       "className": "kbnPageTemplate__pageSideBar",
+      "paddingSize": "none",
     }
   }
   restrictWidth={true}
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index 352e1c80b3266..906220597cd24 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -1,256 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
-<div
-  className="kbnPageTemplateSolutionNav"
->
-  <EuiTitle
-    className="kbnPageTemplateSolutionNav__title"
-    id="kbnPageTemplateSolutionNav__title_generated-id"
-    size="xs"
-  >
-    <h2>
-      <strong>
-        Solution
-      </strong>
-    </h2>
-  </EuiTitle>
-  <EuiSideNav
-    aria-labelledby="kbnPageTemplateSolutionNav__title_generated-id"
-    data-test-subj="DTS"
-    isOpenOnMobile={false}
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "items": Array [
-            Object {
-              "id": "1.1",
-              "name": "Ingest Node Pipelines",
-            },
-            Object {
-              "id": "1.2",
-              "name": "Logstash Pipelines",
-            },
-            Object {
-              "id": "1.3",
-              "name": "Beats Central Management",
-            },
-          ],
-          "name": "Ingest",
-        },
-        Object {
-          "id": "2",
-          "items": Array [
-            Object {
-              "id": "2.1",
-              "name": "Index Management",
-            },
-            Object {
-              "id": "2.2",
-              "name": "Index Lifecycle Policies",
-            },
-            Object {
-              "id": "2.3",
-              "name": "Snapshot and Restore",
-            },
-          ],
-          "name": "Data",
-        },
-      ]
-    }
-    mobileBreakpoints={
-      Array [
-        "xs",
-        "s",
-      ]
-    }
-    mobileTitle={
-      <h2>
-        <FormattedMessage
-          defaultMessage="{solutionName} Menu"
-          id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
-          values={
-            Object {
-              "solutionName": "Solution",
-            }
-          }
-        />
-      </h2>
-    }
-    toggleOpenOnMobile={[Function]}
-  />
-</div>
-`;
+exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `<Fragment />`;
 
-exports[`KibanaPageTemplateSolutionNav renders 1`] = `
-<div
-  className="kbnPageTemplateSolutionNav"
->
-  <EuiTitle
-    className="kbnPageTemplateSolutionNav__title"
-    id="kbnPageTemplateSolutionNav__title_generated-id"
-    size="xs"
-  >
-    <h2>
-      <strong>
-        Solution
-      </strong>
-    </h2>
-  </EuiTitle>
-  <EuiSideNav
-    aria-labelledby="kbnPageTemplateSolutionNav__title_generated-id"
-    isOpenOnMobile={false}
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "items": Array [
-            Object {
-              "id": "1.1",
-              "name": "Ingest Node Pipelines",
-            },
-            Object {
-              "id": "1.2",
-              "name": "Logstash Pipelines",
-            },
-            Object {
-              "id": "1.3",
-              "name": "Beats Central Management",
-            },
-          ],
-          "name": "Ingest",
-        },
-        Object {
-          "id": "2",
-          "items": Array [
-            Object {
-              "id": "2.1",
-              "name": "Index Management",
-            },
-            Object {
-              "id": "2.2",
-              "name": "Index Lifecycle Policies",
-            },
-            Object {
-              "id": "2.3",
-              "name": "Snapshot and Restore",
-            },
-          ],
-          "name": "Data",
-        },
-      ]
-    }
-    mobileBreakpoints={
-      Array [
-        "xs",
-        "s",
-      ]
-    }
-    mobileTitle={
-      <h2>
-        <FormattedMessage
-          defaultMessage="{solutionName} Menu"
-          id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
-          values={
-            Object {
-              "solutionName": "Solution",
-            }
-          }
-        />
-      </h2>
-    }
-    toggleOpenOnMobile={[Function]}
-  />
-</div>
-`;
+exports[`KibanaPageTemplateSolutionNav renders 1`] = `<Fragment />`;
 
-exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
-<div
-  className="kbnPageTemplateSolutionNav"
->
-  <EuiTitle
-    className="kbnPageTemplateSolutionNav__title"
-    id="kbnPageTemplateSolutionNav__title_generated-id"
-    size="xs"
-  >
-    <h2>
-      <KibanaPageTemplateSolutionNavAvatar
-        iconType="logoElastic"
-        name="Solution"
-      />
-      <strong>
-        Solution
-      </strong>
-    </h2>
-  </EuiTitle>
-  <EuiSideNav
-    aria-labelledby="kbnPageTemplateSolutionNav__title_generated-id"
-    isOpenOnMobile={false}
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "items": Array [
-            Object {
-              "id": "1.1",
-              "name": "Ingest Node Pipelines",
-            },
-            Object {
-              "id": "1.2",
-              "name": "Logstash Pipelines",
-            },
-            Object {
-              "id": "1.3",
-              "name": "Beats Central Management",
-            },
-          ],
-          "name": "Ingest",
-        },
-        Object {
-          "id": "2",
-          "items": Array [
-            Object {
-              "id": "2.1",
-              "name": "Index Management",
-            },
-            Object {
-              "id": "2.2",
-              "name": "Index Lifecycle Policies",
-            },
-            Object {
-              "id": "2.3",
-              "name": "Snapshot and Restore",
-            },
-          ],
-          "name": "Data",
-        },
-      ]
-    }
-    mobileBreakpoints={
-      Array [
-        "xs",
-        "s",
-      ]
-    }
-    mobileTitle={
-      <h2>
-        <KibanaPageTemplateSolutionNavAvatar
-          iconType="logoElastic"
-          name="Solution"
-        />
-        <FormattedMessage
-          defaultMessage="{solutionName} Menu"
-          id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
-          values={
-            Object {
-              "solutionName": "Solution",
-            }
-          }
-        />
-      </h2>
-    }
-    toggleOpenOnMobile={[Function]}
-  />
-</div>
-`;
+exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `<Fragment />`;
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
index a39262fc62d09..161338b9189cb 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -22,7 +22,7 @@
   }
 
   .kbnPageTemplate__pageSideBar:hover & {
-    transition-delay: 2s;
+    transition-delay: $euiAnimSpeedSlow;
   }
 }
 
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 1b44200566405..fe87fabc07739 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -538,7 +538,6 @@
     "core.ui.chrome.headerGlobalNav.helpMenuTitle": "ヘルプ",
     "core.ui.chrome.headerGlobalNav.helpMenuVersion": "v {version}",
     "core.ui.chrome.headerGlobalNav.logoAriaLabel": "Elastic ロゴ",
-    "core.ui.EmptyRecentlyViewed": "最近閲覧したアイテムはありません",
     "core.ui.enterpriseSearchNavList.label": "エンタープライズサーチ",
     "core.ui.errorUrlOverflow.bigUrlWarningNotificationMessage": "{advancedSettingsLink}で{storeInSessionStorageParam}オプションを有効にするか、オンスクリーンビジュアルを簡素化してください。",
     "core.ui.errorUrlOverflow.bigUrlWarningNotificationMessage.advancedSettingsLinkText": "高度な設定",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 9636aa9ba5282..13884d2e42676 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -541,7 +541,6 @@
     "core.ui.chrome.headerGlobalNav.helpMenuTitle": "帮助",
     "core.ui.chrome.headerGlobalNav.helpMenuVersion": "v {version}",
     "core.ui.chrome.headerGlobalNav.logoAriaLabel": "Elastic 徽标",
-    "core.ui.EmptyRecentlyViewed": "没有最近查看的项目",
     "core.ui.enterpriseSearchNavList.label": "企业搜索",
     "core.ui.errorUrlOverflow.bigUrlWarningNotificationMessage": "在{advancedSettingsLink}中启用“{storeInSessionStorageParam}”选项或简化屏幕视觉效果。",
     "core.ui.errorUrlOverflow.bigUrlWarningNotificationMessage.advancedSettingsLinkText": "高级设置",

From 0e56c802ed064a05791840b4d9c4d96ad463fc76 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 09:12:01 -0400
Subject: [PATCH 12/26] fix id for i18n

---
 src/core/public/chrome/ui/header/collapsible_nav.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index cb010268f76a5..2ce5cf2ee4933 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -331,10 +331,7 @@ export function CollapsibleNav({
         <span />
         <EuiCollapsibleNavGroup>
           <EuiButton fill fullWidth iconType="plusInCircleFilled">
-            <FormattedMessage
-              id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
-              defaultMessage="Add Data"
-            />
+            <FormattedMessage id="core.ui.primaryNavSection.addDataBtn" defaultMessage="Add Data" />
           </EuiButton>
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>

From c06a2410bf6ebc81fb36fa926b4ecd3b258e093c Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Mon, 28 Jun 2021 10:52:13 -0500
Subject: [PATCH 13/26] test fixes

---
 .../header/__snapshots__/collapsible_nav.test.tsx.snap | 10 +++++++++-
 x-pack/test/accessibility/apps/home.ts                 |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 801ee55e6bce8..a653fbc5e40bd 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -1986,7 +1986,15 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                             <span
                               className="euiButton__text"
                             >
-                              Add Data
+                              <FormattedMessage
+                                defaultMessage="Add Data"
+                                id="core.ui.primaryNavSection.addDataBtn"
+                                values={Object {}}
+                              >
+                                <span>
+                                  Add Data
+                                </span>
+                              </FormattedMessage>
                             </span>
                           </span>
                         </EuiButtonContent>
diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index 5489df33dcb53..36d617b4a980e 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -12,6 +12,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const a11y = getService('a11y');
   const testSubjects = getService('testSubjects');
   const find = getService('find');
+  const toasts = getService('toasts');
 
   describe('Kibana Home', () => {
     before(async () => {
@@ -29,6 +30,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('toggle side nav meets a11y requirements', async () => {
       await testSubjects.click('toggleNavButton');
+      await toasts.dismissAllToasts();
       await a11y.testAppSnapshot();
     });
 

From d4254eaa5870d5c4813826534325729cf1250718 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Mon, 28 Jun 2021 10:55:38 -0500
Subject: [PATCH 14/26] i18n fix

---
 .../public/page_template/solution_nav/solution_nav.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index aa3d20499888f..08e0ffed27e22 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -94,7 +94,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   );
   const mobileTitleText = (
     <FormattedMessage
-      id="kibana-react.pageTemplate.solutionNav.mobileTitleText"
+      id="kibana-react.solutionNav.mobileTitleText"
       defaultMessage="{solutionName} Menu"
       values={{ solutionName: name || 'Navigation' }}
     />

From fc1ccee2e7f742dcc20ff7ac7cfc69200d115f04 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 12:55:50 -0400
Subject: [PATCH 15/26] address feedback

---
 .../public/page_template/page_template.scss            |  2 +-
 .../solution_nav/solution_nav_collapse_button.scss     |  2 +-
 .../solution_nav/solution_nav_collapse_button.tsx      | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/page_template.scss b/src/plugins/kibana_react/public/page_template/page_template.scss
index 90a8456bb1be2..816b6fda92e39 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.scss
+++ b/src/plugins/kibana_react/public/page_template/page_template.scss
@@ -8,6 +8,6 @@
   }
 
   &.kbnPageTemplate__pageSideBar--shrink {
-    min-width: $euiSizeL * 2;
+    min-width: $euiSizeXXL + $euiSize;
   }
 }
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
index 161338b9189cb..6e1420d9b137b 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -27,7 +27,7 @@
 }
 
 .kbnPageTemplateSolutionNavCollapseButton-isCollapsed {
-  left: $euiSizeS !important;
+  left: $euiSizeM !important;
   opacity: 1 !important;
   transition-delay: 0s !important;
 }
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
index 56b5c224025ab..cc437edc5c13f 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -36,10 +36,14 @@ export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<Kiba
     className
   );
 
-  const label = i18n.translate('kibana-react.solutionNav.collapsibleLabel', {
+  const collapseLabel = i18n.translate('kibana-react.solutionNav.collapsibleLabel', {
     defaultMessage: 'Collapse side navigation',
   });
 
+  const openLabel = i18n.translate('kibana-react.solutionNav.openLabel', {
+    defaultMessage: 'Open side navigation',
+  });
+
   return (
     <EuiButtonIcon
       className={classes}
@@ -47,8 +51,8 @@ export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<Kiba
       size="s"
       display="fill"
       color="text"
-      aria-label={label}
-      title={label}
+      aria-label={isCollapsed ? openLabel : collapseLabel}
+      title={isCollapsed ? openLabel : collapseLabel}
       {...rest}
     />
   );

From 10fae821fa7b7dae493e1b57191e17ca33b5a181 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 14:29:33 -0400
Subject: [PATCH 16/26] address feedback, remove lock ability from tests

---
 .../public/chrome/ui/header/collapsible_nav.test.tsx     | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index e69ac65b59850..019a3c7820324 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -77,20 +77,11 @@ function clickGroup(component: ReactWrapper, group: string) {
 describe('CollapsibleNav', () => {
   // this test is mostly an "EUI works as expected" sanity check
   it('renders the default nav', () => {
-    // Removing Locking ability without totally removing
-    // const onLock = sinon.spy();
     const component = mount(<CollapsibleNav {...mockProps()} />);
     expect(component).toMatchSnapshot();
 
     component.setProps({ isOpen: true });
     expect(component).toMatchSnapshot();
-
-    // component.setProps({ isLocked: true });
-    // expect(component).toMatchSnapshot();
-
-    // // limit the find to buttons because jest also renders data-test-subj on a JSX wrapper element
-    // component.find('button[data-test-subj="collapsible-nav-lock"]').simulate('click');
-    // expect(onLock.callCount).toEqual(1);
   });
 
   it('renders links grouped by category', () => {

From bae9117d9f7e590174a92293d6aed5730c6efdbc Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 14:31:40 -0400
Subject: [PATCH 17/26] address feedback, remove lock ability from tests

---
 src/core/public/chrome/ui/header/collapsible_nav.test.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index 019a3c7820324..075cb9cb22542 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -44,14 +44,12 @@ function mockProps() {
     appId$: new BehaviorSubject('test'),
     basePath: httpServiceMock.createSetupContract({ basePath: '/test' }).basePath,
     id: 'collapsibe-nav',
-    isLocked: false,
     isNavOpen: false,
     homeHref: '/',
     url: '/',
     navLinks$: new BehaviorSubject([]),
     recentlyAccessed$: new BehaviorSubject([]),
     storage: new StubBrowserStorage(),
-    onIsLockedUpdate: () => {},
     closeNav: () => {},
     navigateToApp: () => Promise.resolve(),
     navigateToUrl: () => Promise.resolve(),

From 025717449d79567140b6c143bd4b831cf8d91eed Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 15:05:48 -0400
Subject: [PATCH 18/26] fix for test

---
 src/core/public/chrome/ui/header/collapsible_nav.test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index 075cb9cb22542..019a3c7820324 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -44,12 +44,14 @@ function mockProps() {
     appId$: new BehaviorSubject('test'),
     basePath: httpServiceMock.createSetupContract({ basePath: '/test' }).basePath,
     id: 'collapsibe-nav',
+    isLocked: false,
     isNavOpen: false,
     homeHref: '/',
     url: '/',
     navLinks$: new BehaviorSubject([]),
     recentlyAccessed$: new BehaviorSubject([]),
     storage: new StubBrowserStorage(),
+    onIsLockedUpdate: () => {},
     closeNav: () => {},
     navigateToApp: () => Promise.resolve(),
     navigateToUrl: () => Promise.resolve(),

From 313ada905f8fdfff64a0cccc1cfd53ec1f170a1e Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 16:50:21 -0400
Subject: [PATCH 19/26] feedback

---
 .../public/page_template/solution_nav/solution_nav.tsx   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index 66d15e2a97eb1..ae115198ffe04 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -7,7 +7,7 @@
  */
 import './solution_nav.scss';
 
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState, Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
@@ -43,8 +43,7 @@ export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
 
 const negativeTabIndex = (items: Array<EuiSideNavItemType<{}>>) => {
   return items.map((item) => {
-    // TODO need EUI support
-    // @ts-ignore
+    // @ts-ignore-next-line Can be removed on close of https://github.com/elastic/eui/issues/4925
     item.tabIndex = -1;
     item.items = item.items && negativeTabIndex(item.items);
     return item;
@@ -132,7 +131,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
     <>
       {isSmallerBreakpoint && sideNav}
       {isMediumBreakpoint && (
-        <>
+        <Fragment>
           {isSideNavOpenOnMobile && (
             <EuiFlyout
               ownFocus={false}
@@ -149,7 +148,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
             isCollapsed={true}
             onClick={toggleOpenOnMobile}
           />
-        </>
+        </Fragment>
       )}
       {isLargerBreakpoint && (
         <>

From 937b326706ab4142ca9802d93d0eb9fff5c4b97f Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 16:52:04 -0400
Subject: [PATCH 20/26] feedback

---
 .../public/page_template/solution_nav/solution_nav.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index ae115198ffe04..d677830d64365 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -151,13 +151,13 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
         </Fragment>
       )}
       {isLargerBreakpoint && (
-        <>
+        <Fragment>
           {sideNav}
           <KibanaPageTemplateSolutionNavCollapseButton
             isCollapsed={!isOpenOnDesktop}
             onClick={onCollapse}
           />
-        </>
+        </Fragment>
       )}
     </>
   );

From 1ed12d6fe8fe944ce1d36942c5e5821522bb6dcd Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 28 Jun 2021 16:54:15 -0400
Subject: [PATCH 21/26] fix all of the fragments

---
 .../page_template/solution_nav/solution_nav.tsx      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
index d677830d64365..d1911ffe107d2 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -86,10 +86,10 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
    * Create the titles
    */
   const titleText = (
-    <>
+    <Fragment>
       {solutionAvatar}
       <strong>{name}</strong>
-    </>
+    </Fragment>
   );
   const mobileTitleText = (
     <FormattedMessage
@@ -114,10 +114,10 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
         className={sideNavClasses}
         heading={titleText}
         mobileTitle={
-          <>
+          <Fragment>
             {solutionAvatar}
             {mobileTitleText}
-          </>
+          </Fragment>
         }
         toggleOpenOnMobile={toggleOpenOnMobile}
         isOpenOnMobile={isSideNavOpenOnMobile}
@@ -128,7 +128,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
   }
 
   return (
-    <>
+    <Fragment>
       {isSmallerBreakpoint && sideNav}
       {isMediumBreakpoint && (
         <Fragment>
@@ -159,6 +159,6 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
           />
         </Fragment>
       )}
-    </>
+    </Fragment>
   );
 };

From 508956aaec8dd4879f5064661b0f4750dab058fe Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Mon, 28 Jun 2021 17:44:37 -0500
Subject: [PATCH 22/26] a11y test fix/skip

---
 .../kibana_react/public/page_template/page_template.scss | 2 --
 x-pack/test/accessibility/apps/home.ts                   | 9 ++++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/page_template.scss b/src/plugins/kibana_react/public/page_template/page_template.scss
index 816b6fda92e39..a5419374a8beb 100644
--- a/src/plugins/kibana_react/public/page_template/page_template.scss
+++ b/src/plugins/kibana_react/public/page_template/page_template.scss
@@ -1,5 +1,3 @@
-// $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-
 .kbnPageTemplate__pageSideBar {
   overflow: hidden;
 
diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index 36d617b4a980e..0c7bba9a610c7 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -12,7 +12,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const a11y = getService('a11y');
   const testSubjects = getService('testSubjects');
   const find = getService('find');
-  const toasts = getService('toasts');
 
   describe('Kibana Home', () => {
     before(async () => {
@@ -28,9 +27,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    it('toggle side nav meets a11y requirements', async () => {
+    /**
+     * Test fails claiming that a user can focus on an element with aria-hidden
+     * But axe does not recognize our focus trap which prevents a user from ever actually doing that
+     * Open question on why this doesn't fail in other areas though but the structure is the same
+     */
+    it.skip('toggle side nav meets a11y requirements', async () => {
       await testSubjects.click('toggleNavButton');
-      await toasts.dismissAllToasts();
       await a11y.testAppSnapshot();
     });
 

From f5aafd55a2cc982539a98e67b79cfea23a079c48 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Tue, 29 Jun 2021 00:14:23 -0500
Subject: [PATCH 23/26] a11y test fix

---
 x-pack/test/accessibility/apps/home.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index 0c7bba9a610c7..20a711a20749f 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -30,7 +30,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     /**
      * Test fails claiming that a user can focus on an element with aria-hidden
      * But axe does not recognize our focus trap which prevents a user from ever actually doing that
-     * Open question on why this doesn't fail in other areas though but the structure is the same
+     * Open question on why this doesn't fail in other areas though but the structure is the
      */
     it.skip('toggle side nav meets a11y requirements', async () => {
       await testSubjects.click('toggleNavButton');
@@ -38,6 +38,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('Enterprise search overview page meets a11y requirements ', async () => {
+      await testSubjects.click('toggleNavButton');
       await testSubjects.click('homeLink');
       await testSubjects.click('homSolutionPanel homSolutionPanel_enterpriseSearch');
       await a11y.testAppSnapshot();

From 9ffb8833a9e7f01d55af77d0455ef2cf77b32ad2 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 29 Jun 2021 11:00:49 -0400
Subject: [PATCH 24/26] fix shadow issue because of zindex changing in last eui
 update

---
 .../public/page_template/solution_nav/solution_nav.scss       | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
index e68e4e4ab792e..1ac42fa0dd79d 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
@@ -2,10 +2,6 @@ $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 
 .kbnPageTemplateSolutionNav {
   @include euiYScroll;
-  background:
-    linear-gradient(160deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSizeXL, rgba(#FFF, 0) 0),
-    linear-gradient(175deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSize, rgba(#FFF, 0) 0),
-    $euiPageBackgroundColor;
 
   @include euiBreakpoint('m') {
     width: $euiPageSidebarMinWidth + ($euiSizeL * 2);

From fff535c502ed5cffb9a65e0c6f6cef832e9676cf Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Tue, 29 Jun 2021 10:39:50 -0500
Subject: [PATCH 25/26] remove a11y test for nav docking

---
 x-pack/test/accessibility/apps/home.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index 20a711a20749f..69262180a762b 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -86,12 +86,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    it('Dock the side nav', async () => {
-      await testSubjects.click('toggleNavButton');
-      await PageObjects.home.dockTheSideNav();
-      await a11y.testAppSnapshot();
-    });
-
     it('click on collapse on observability in side nav to test a11y of collapse button', async () => {
       await find.clickByCssSelector(
         '[data-test-subj="collapsibleNavGroup-observability"] .euiCollapsibleNavGroup__title'
@@ -99,12 +93,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    // TODO https://github.com/elastic/kibana/issues/77828
-    it.skip('undock the side nav', async () => {
-      await PageObjects.home.dockTheSideNav();
-      await a11y.testAppSnapshot();
-    });
-
     it('passes with searchbox open', async () => {
       await testSubjects.click('nav-search-popover');
       await a11y.testAppSnapshot();

From f7d52f41f0e96ffe2794f633134c553289afe537 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Tue, 29 Jun 2021 12:12:43 -0500
Subject: [PATCH 26/26] polish a11y tests

---
 test/functional/page_objects/home_page.ts | 21 +++++++++-----
 x-pack/test/accessibility/apps/home.ts    | 34 +++++++++++------------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/test/functional/page_objects/home_page.ts b/test/functional/page_objects/home_page.ts
index 33de6a33c50f5..aed0bf5f0d56c 100644
--- a/test/functional/page_objects/home_page.ts
+++ b/test/functional/page_objects/home_page.ts
@@ -110,21 +110,28 @@ export class HomePageObject extends FtrService {
     await this.testSubjects.click('onCloudTutorial');
   }
 
-  // click on side nav toggle button to see all of side nav
-  async clickOnToggleNavButton() {
+  // click on global nav toggle button
+  async clickToggleGlobalNav() {
     await this.testSubjects.click('toggleNavButton');
   }
 
+  async clickGoHome() {
+    await this.openCollapsibleNav();
+    await this.testSubjects.click('homeLink');
+  }
+
+  // open global nav if it's closed
+  async openCollapsibleNav() {
+    if (!(await this.testSubjects.exists('collapsibleNav'))) {
+      await this.clickToggleGlobalNav();
+    }
+  }
+
   // collapse the observability side nav details
   async collapseObservabibilitySideNav() {
     await this.testSubjects.click('collapsibleNavGroup-observability');
   }
 
-  // dock the side nav
-  async dockTheSideNav() {
-    await this.testSubjects.click('collapsible-nav-lock');
-  }
-
   async loadSavedObjects() {
     await this.retry.try(async () => {
       await this.testSubjects.click('loadSavedObjects');
diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index 69262180a762b..a7158d9579b60 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -8,14 +8,14 @@
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const PageObjects = getPageObjects(['common', 'home']);
+  const { common, home } = getPageObjects(['common', 'home']);
   const a11y = getService('a11y');
   const testSubjects = getService('testSubjects');
   const find = getService('find');
 
   describe('Kibana Home', () => {
     before(async () => {
-      await PageObjects.common.navigateToApp('home');
+      await common.navigateToApp('home');
     });
 
     it('Kibana Home view', async () => {
@@ -33,34 +33,39 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      * Open question on why this doesn't fail in other areas though but the structure is the
      */
     it.skip('toggle side nav meets a11y requirements', async () => {
-      await testSubjects.click('toggleNavButton');
+      await home.openCollapsibleNav();
+      await a11y.testAppSnapshot();
+    });
+
+    // skipped for same reason as above "toggle side nav meets a11y requirements" test
+    it.skip('click on collapse on observability in side nav to test a11y of collapse button', async () => {
+      await home.openCollapsibleNav();
+      await find.clickByCssSelector(
+        '[data-test-subj="collapsibleNavGroup-observability"] .euiCollapsibleNavGroup__title'
+      );
       await a11y.testAppSnapshot();
     });
 
     it('Enterprise search overview page meets a11y requirements ', async () => {
-      await testSubjects.click('toggleNavButton');
-      await testSubjects.click('homeLink');
+      await home.clickGoHome();
       await testSubjects.click('homSolutionPanel homSolutionPanel_enterpriseSearch');
       await a11y.testAppSnapshot();
     });
 
     it('Observability overview page meets a11y requirements ', async () => {
-      await testSubjects.click('toggleNavButton');
-      await testSubjects.click('homeLink');
+      await home.clickGoHome();
       await testSubjects.click('homSolutionPanel homSolutionPanel_observability');
       await a11y.testAppSnapshot();
     });
 
     it('Security overview page meets a11y requirements ', async () => {
-      await testSubjects.click('toggleNavButton');
-      await testSubjects.click('homeLink');
+      await home.clickGoHome();
       await testSubjects.click('homSolutionPanel homSolutionPanel_securitySolution');
       await a11y.testAppSnapshot();
     });
 
     it('Add data page meets a11y requirements ', async () => {
-      await testSubjects.click('toggleNavButton');
-      await testSubjects.click('homeLink');
+      await home.clickGoHome();
       await testSubjects.click('homeAddData');
       await a11y.testAppSnapshot();
     });
@@ -86,13 +91,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    it('click on collapse on observability in side nav to test a11y of collapse button', async () => {
-      await find.clickByCssSelector(
-        '[data-test-subj="collapsibleNavGroup-observability"] .euiCollapsibleNavGroup__title'
-      );
-      await a11y.testAppSnapshot();
-    });
-
     it('passes with searchbox open', async () => {
       await testSubjects.click('nav-search-popover');
       await a11y.testAppSnapshot();