[SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav

packages/kbn-shared-ux-components/src/index.ts

@@ -95,6 +95,23 @@ export const LazyIconButtonGroup = React.lazy(() =>
  */
 export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
 
+/**
+ * The lazily loaded `KibanaPageTemplateSolutionNav` component that is wrapped by the `withSuspense` HOC. Consumers should use
+ * `React.Suspense` or `withSuspense` HOC to load this component.
+ */
+export const KibanaPageTemplateSolutionNavLazy = React.lazy(() =>
+  import('./page_template/solution_nav').then(({ KibanaPageTemplateSolutionNav }) => ({
+    default: KibanaPageTemplateSolutionNav,
+  }))
+);
+
+/**
+ * A `KibanaPageTemplateSolutionNav` component that is wrapped by the `withSuspense` HOC.  This component can
+ * be used directly by consumers and will load the `KibanaPageTemplateSolutionNavLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const KibanaPageTemplateSolutionNav = withSuspense(KibanaPageTemplateSolutionNavLazy);
+
 /**
  * The Lazily-loaded `KibanaSolutionAvatar` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.

packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export type { KibanaPageTemplateSolutionNavProps } from './solution_nav';
+export { KibanaPageTemplateSolutionNav } from './solution_nav';
+export type { KibanaPageTemplateSolutionNavCollapseButtonProps } from './solution_nav_collapse_button';
+export { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';

packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss

@@ -0,0 +1,30 @@
+$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
+@import '@elastic/eui/src/components/side_nav/mixins';
+
+// Put the page background color in the flyout version too
+.kbnPageTemplateSolutionNav__flyout {
+  background-color: $euiPageBackgroundColor;
+}
+
+.kbnPageTemplateSolutionNav {
+  @include euiSideNavEmbellish;
+  @include euiYScroll;
+
+  @include euiBreakpoint('m' ,'l', 'xl') {
+    width: 248px;
+    padding: $euiSizeL;
+  }
+
+  .kbnPageTemplateSolutionNavAvatar {
+    margin-right: $euiSize;
+  }
+}
+
+.kbnPageTemplateSolutionNav--hidden {
+  pointer-events: none;
+  opacity: 0;
+
+  @include euiCanAnimate {
+    transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+  }
+}