[SideNav] Move components from demo env to Storybook

.github/CODEOWNERS

@@ -129,6 +129,7 @@ src/core/packages/chrome/browser-mocks @elastic/appex-sharedux
 src/core/packages/chrome/layout/core-chrome-layout @elastic/appex-sharedux
 src/core/packages/chrome/layout/core-chrome-layout-components @elastic/appex-sharedux
 src/core/packages/chrome/layout/core-chrome-layout-constants @elastic/appex-sharedux
+src/core/packages/chrome/navigation @elastic/eui-team
 src/core/packages/config/server-internal @elastic/kibana-core
 src/core/packages/custom-branding/browser @elastic/appex-sharedux
 src/core/packages/custom-branding/browser-internal @elastic/appex-sharedux

package.json

@@ -290,6 +290,7 @@
     "@kbn/core-chrome-layout": "link:src/core/packages/chrome/layout/core-chrome-layout",
     "@kbn/core-chrome-layout-components": "link:src/core/packages/chrome/layout/core-chrome-layout-components",
     "@kbn/core-chrome-layout-constants": "link:src/core/packages/chrome/layout/core-chrome-layout-constants",
+    "@kbn/core-chrome-navigation": "link:src/core/packages/chrome/navigation",
     "@kbn/core-config-server-internal": "link:src/core/packages/config/server-internal",
     "@kbn/core-custom-branding-browser": "link:src/core/packages/custom-branding/browser",
     "@kbn/core-custom-branding-browser-internal": "link:src/core/packages/custom-branding/browser-internal",

src/core/packages/chrome/browser-internal/src/ui/header/screen_reader_a11y.tsx

@@ -11,6 +11,7 @@ import React, { FC, useState, useEffect } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { EuiScreenReaderLive, EuiSkipLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { MAIN_CONTENT_SELECTORS } from '@kbn/core-chrome-layout-constants';
 
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
 import type { HeaderProps } from './header';
@@ -57,18 +58,12 @@ export const ScreenReaderRouteAnnouncements: FC<{
   );
 };
 
-const fallbackContentQueries = [
-  'main', // Ideal target for all plugins using KibanaPageTemplate
-  '[role="main"]', // Fallback for plugins using deprecated EuiPageContent
-  '.kbnAppWrapper', // Last-ditch fallback for all plugins regardless of page template
-];
-
 export const SkipToMainContent = () => {
   return (
     <EuiSkipLink
       position="fixed"
       destinationId="" // TODO: Potentially allow this to be customizable per-plugin
-      fallbackDestination={fallbackContentQueries}
+      fallbackDestination={MAIN_CONTENT_SELECTORS}
       overrideLinkBehavior
       href="" // Render a button
     >

src/core/packages/chrome/browser-internal/src/ui/project/sidenav_v2/fixed_layout_sidenav.tsx

@@ -12,19 +12,19 @@ import React, { FunctionComponent } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { BehaviorSubject } from 'rxjs';
 import { css, Global } from '@emotion/react';
-// import {
-//   LOGO,
-//   PRIMARY_MENU_FOOTER_ITEMS,
-//   PRIMARY_MENU_ITEMS,
-//   // eslint-disable-next-line @kbn/imports/no_boundary_crossing
-// } from '@kbn/core-chrome-navigation/src/mocks/observability';
-// import { Navigation as NavigationComponent } from '@kbn/core-chrome-navigation';
+import {
+  LOGO,
+  PRIMARY_MENU_FOOTER_ITEMS,
+  PRIMARY_MENU_ITEMS,
+  // eslint-disable-next-line @kbn/imports/no_boundary_crossing
+} from '@kbn/core-chrome-navigation/src/mocks/observability';
+import { Navigation as NavigationComponent } from '@kbn/core-chrome-navigation';
 import { SideNavV2CollapseButton } from './collapse_button';
 
-// const demoItems = {
-//   primaryItems: PRIMARY_MENU_ITEMS,
-//   footerItems: PRIMARY_MENU_FOOTER_ITEMS,
-// };
+const demoItems = {
+  primaryItems: PRIMARY_MENU_ITEMS,
+  footerItems: PRIMARY_MENU_FOOTER_ITEMS,
+};
 
 interface CollapsibleNavigationProps {
   toggle: (isVisible: boolean) => void;
@@ -41,16 +41,15 @@ export const FixedLayoutProjectSideNavV2: FunctionComponent<CollapsibleNavigatio
     <>
       <SideNavV2CollapseButton isCollapsed={isCollapsed} toggle={toggle} />
       <CollapsibleNavigationFlyout>
-        {
-          ({ setWidth }) => null
-          // <NavigationComponent
-          //   isCollapsed={isCollapsed}
-          //   items={demoItems}
-          //   logoLabel={LOGO.label}
-          //   logoType={LOGO.logoType}
-          //   setWidth={setWidth}
-          // />
-        }
+        {({ setWidth }) => (
+          <NavigationComponent
+            isCollapsed={isCollapsed}
+            items={demoItems}
+            logoLabel={LOGO.label}
+            logoType={LOGO.logoType}
+            setWidth={setWidth}
+          />
+        )}
       </CollapsibleNavigationFlyout>
     </>
   );

src/core/packages/chrome/browser-internal/src/ui/project/sidenav_v2/grid_layout_sidenav.tsx

@@ -7,37 +7,37 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-// import useObservable from 'react-use/lib/useObservable';
-// import { useLayoutUpdate } from '@kbn/core-chrome-layout-components';
-import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { useLayoutUpdate } from '@kbn/core-chrome-layout-components';
+import React, { useCallback } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { css, Global } from '@emotion/react';
-// import { Navigation as NavigationComponent } from '@kbn/core-chrome-navigation';
-// import {
-//   LOGO,
-//   PRIMARY_MENU_FOOTER_ITEMS,
-//   PRIMARY_MENU_ITEMS,
-//   // eslint-disable-next-line @kbn/imports/no_boundary_crossing
-// } from '@kbn/core-chrome-navigation/src/mocks/observability';
+import { Navigation as NavigationComponent } from '@kbn/core-chrome-navigation';
+import {
+  LOGO,
+  PRIMARY_MENU_FOOTER_ITEMS,
+  PRIMARY_MENU_ITEMS,
+  // eslint-disable-next-line @kbn/imports/no_boundary_crossing
+} from '@kbn/core-chrome-navigation/src/mocks/observability';
 
-// const demoItems = {
-//   primaryItems: PRIMARY_MENU_ITEMS,
-//   footerItems: PRIMARY_MENU_FOOTER_ITEMS,
-// };
+const demoItems = {
+  primaryItems: PRIMARY_MENU_ITEMS,
+  footerItems: PRIMARY_MENU_FOOTER_ITEMS,
+};
 
 export interface Props {
   isCollapsed$: BehaviorSubject<boolean>;
 }
 
 export const GridLayoutProjectSideNavV2 = ({ isCollapsed$ }: Props) => {
-  // const isCollapsed = useObservable(isCollapsed$, isCollapsed$.getValue());
-  // const updateLayout = useLayoutUpdate();
-  // const setWidth = useCallback(
-  //   (width: number) => {
-  //     updateLayout({ navigationWidth: width });
-  //   },
-  //   [updateLayout]
-  // );
+  const isCollapsed = useObservable(isCollapsed$, isCollapsed$.getValue());
+  const updateLayout = useLayoutUpdate();
+  const setWidth = useCallback(
+    (width: number) => {
+      updateLayout({ navigationWidth: width });
+    },
+    [updateLayout]
+  );
 
   return (
     <>
@@ -49,13 +49,13 @@ export const GridLayoutProjectSideNavV2 = ({ isCollapsed$ }: Props) => {
           }
         `}
       />
-      {/* <NavigationComponent*/}
-      {/*  isCollapsed={isCollapsed}*/}
-      {/*  items={demoItems}*/}
-      {/*  logoLabel={LOGO.label}*/}
-      {/*  logoType={LOGO.logoType}*/}
-      {/*  setWidth={setWidth}*/}
-      {/* />*/}
+      <NavigationComponent
+        isCollapsed={isCollapsed}
+        items={demoItems}
+        logoLabel={LOGO.label}
+        logoType={LOGO.logoType}
+        setWidth={setWidth}
+      />
     </>
   );
 };

src/core/packages/chrome/browser-internal/tsconfig.json

@@ -64,6 +64,9 @@
     "@kbn/core-user-profile-common",
     "@kbn/core-theme-browser-internal",
     "@kbn/shared-ux-chrome-navigation",
+    "@kbn/core-chrome-navigation",
+    "@kbn/core-chrome-layout-components",
+    "@kbn/core-chrome-layout-constants"
   ],
   "exclude": [
     "target/**/*",

src/core/packages/chrome/layout/core-chrome-layout-constants/index.ts

@@ -9,7 +9,7 @@
 
 /**
  * The ID of the main scroll container in the application.
- * `document.getElementById(APP_MAIN_SCROLL_CONTAINER_ID)` can be used to find the main scroll container
+ * `document.getElementById(APP_MAIN_SCROLL_CONTAINER_ID)` can be used to find the main scroll container.
  */
 export const APP_MAIN_SCROLL_CONTAINER_ID = 'app-main-scroll';
 
@@ -18,3 +18,15 @@ export const APP_MAIN_SCROLL_CONTAINER_ID = 'app-main-scroll';
  * This div is rendered by the `AppFixedViewport` component on the top of the application area and can be used to render fixed elements that should not scroll with the main content.
  */
 export const APP_FIXED_VIEWPORT_ID = 'app-fixed-viewport';
+
+/**
+ * The ID of the main content container in the application, regardless of the type of the layout used.
+ * `document.querySelector(MAIN_CONTENT_SELECTORS.join(','))` can be used to find the main content container.
+ *
+ * TODO: Potentially allow this to be customizable per-plugin
+ */
+export const MAIN_CONTENT_SELECTORS = [
+  'main', // Ideal target for all plugins using KibanaPageTemplate
+  '[role="main"]', // Fallback for plugins using deprecated EuiPageContent
+  '.kbnAppWrapper', // Last-ditch fallback for all plugins regardless of page template
+];

src/core/packages/chrome/navigation/README.md

@@ -0,0 +1,168 @@
+# @kbn/core-chrome-navigation
+
+An adaptive side navigation system built with [Elastic UI](https://eui.elastic.co/). Features responsive design, nested menu structures, and accessibility-first user experience. Exported as a self-contained widget.
+
+| Expanded mode                 | Collapsed mode                 |
+| ----------------------------- | ------------------------------ |
+| ![image](./expanded-mode.png) | ![image](./collapsed-mode.png) |
+
+## Features
+
+- **Responsive design** - automatically adapts between collapsed and expanded states based on screen size.
+- **Smart menu system** - dynamic "More" menu that consolidates overflow items during window resize.
+- **Nested navigation** - multi-level menu support with nested popover panels in collapsed mode.
+- **Accessibility-first** - WCAG-compliant with proper ARIA labels, keyboard navigation, and screen reader support.
+- **Modular architecture** - composable components with clean separation of concerns. Exported as a self-contained widget.
+- **Dark mode** and **High contrast mode support**
+
+## Usage
+
+### Basic setup
+
+```tsx
+import { Navigation } from '@kbn/core-chrome-navigation';
+
+const navigationItems = {
+  primaryItems: [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: 'dashboardApp',
+      href: '/dashboard',
+    },
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      icon: 'graphApp',
+      href: '/analytics',
+      secondaryItems: [
+        {
+          id: 'overview',
+          label: 'Overview',
+          href: '/analytics',
+        },
+        {
+          id: 'reports',
+          label: 'Reports',
+          href: '/analytics/reports',
+        },
+        {
+          id: 'metrics',
+          label: 'Metrics',
+          href: '/analytics/metrics',
+        },
+      ],
+    },
+  ],
+  footerItems: [
+    {
+      id: 'settings',
+      label: 'Settings',
+      icon: 'gear',
+      href: '/settings',
+    },
+  ],
+};
+
+function App() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <div className="app">
+      <TopBar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
+      <Navigation
+        title="Observability"
+        logo="observabilityApp"
+        items={navigationItems}
+        isCollapsed={isCollapsed}
+      />
+      <main className="app-content">{/* Your application content */}</main>
+    </div>
+  );
+}
+```
+
+### Navigation structure
+
+The navigation is configured by passing the structure to `items` prop. The structure is an array of `MenuItem` objects, where each `MenuItem` can have an optional `sections` array of `Section` objects.
+
+```js
+export const navigationItems = {
+  primaryItems: [
+    // Simple menu item
+    {
+      id: 'overview',
+      label: 'Overview',
+      iconType: 'info',
+      href: '/overview',
+    },
+    // Menu item with nested sections
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      iconType: 'graphApp',
+      href: '/analytics/reports',
+      sections: [
+        {
+          id: 'reports-section',
+          label: 'Reports', // or null for unlabeled sections
+          items: [
+            {
+              id: 'overview',
+              label: 'Overview',
+              href: '/analytics/reports', // has the same `href` as the parent item
+            },
+            {
+              id: 'sales-report',
+              label: 'Sales report',
+              href: '/analytics/sales',
+            },
+            {
+              id: 'traffic-report',
+              label: 'Traffic report',
+              href: '/analytics/traffic',
+              external: true, // opens in new tab and shows an "external resource" icon
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  footerItems: [
+    {
+      id: 'settings',
+      label: 'Settings', // it's required for accessibility purposes
+      iconType: 'gear',
+      href: '/settings',
+    },
+  ],
+};
+```
+
+## Development
+
+1. Install dependencies:
+
+```bash
+yarn kbn bootstrap
+```
+
+2. Start Storybook:
+
+```bash
+yarn storybook shared_ux
+```
+
+Open [http://localhost:9001](http://localhost:9001) to view the application.
+
+## Testing
+
+The project includes comprehensive test coverage using Jest and RTL.
+
+Run tests with:
+
+```bash
+yarn test:jest src/core/packages/chrome/navigation              # Run all tests
+yarn test:jest src/core/packages/chrome/navigation --watch      # Run in watch mode
+yarn test:jest src/core/packages/chrome/navigation --coverage   # Generate coverage report
+```

src/core/packages/chrome/navigation/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { Navigation } from './src/components/navigation';
+export { useNavigation } from './src/hooks/use_navigation';