feat: refactor active state management and test

Author: weronikaolejniczak

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

@@ -6,15 +6,6 @@ An adaptive side navigation system built with [Elastic UI](https://eui.elastic.c
 | ----------------------------- | ------------------------------ |
 | ![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
@@ -66,6 +57,12 @@ const navigationItems = {
 
 function App() {
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const [activeItemId, setActiveItemId] = useState('dashboard');
+
+  const handleItemClick = (item: MenuItem | SecondaryMenuItem | SideNavLogo) => {
+    setActiveItemId(item.id);
+    trackAnalytics(item.id);
+  };
 
   return (
     <div className="app">
@@ -80,6 +77,7 @@ function App() {
           iconType: 'observabilityApp',
           href: '/observability',
         }}
+        onItemClick={handleItemClick}
         setWidth={setNavigationWidth}
       />
       <main className="app-content">{/* Your application content */}</main>
@@ -101,6 +99,7 @@ export const navigationItems = {
       label: 'Overview',
       iconType: 'info',
       href: '/overview',
+      badgeType: 'techPreview', // for tech preview items
     },
     // Menu item with nested sections
     {
@@ -111,7 +110,7 @@ export const navigationItems = {
       sections: [
         {
           id: 'reports-section',
-          label: 'Reports', // or null for unlabeled sections
+          label: 'Reports', // omit for unlabeled sections
           items: [
             {
               id: 'analytics', // has the same `id` as the parent item
@@ -122,6 +121,7 @@ export const navigationItems = {
               id: 'sales-report',
               label: 'Sales report',
               href: '/analytics/sales',
+              badgeType: 'beta', // for beta items
             },
             {
               id: 'traffic-report',

src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx

@@ -91,6 +91,7 @@ export const Default: StoryObj<PropsAndArgs> = {
       );
     },
   ],
+  render: (args) => <ControlledNavigation {...args} />,
 };
 
 export const Collapsed: StoryObj<PropsAndArgs> = {
@@ -108,6 +109,7 @@ export const Collapsed: StoryObj<PropsAndArgs> = {
   args: {
     isCollapsed: true,
   },
+  render: (args) => <ControlledNavigation {...args} />,
 };
 
 export const WithMinimalItems: StoryObj<PropsAndArgs> = {
@@ -128,6 +130,7 @@ export const WithMinimalItems: StoryObj<PropsAndArgs> = {
       footerItems: PRIMARY_MENU_FOOTER_ITEMS.slice(0, 2),
     },
   },
+  render: (args) => <ControlledNavigation {...args} />,
 };
 
 export const WithManyItems: StoryObj<PropsAndArgs> = {
@@ -168,6 +171,24 @@ export const WithManyItems: StoryObj<PropsAndArgs> = {
       footerItems: PRIMARY_MENU_FOOTER_ITEMS,
     },
   },
+  render: (args) => <ControlledNavigation {...args} />,
+};
+
+export const WithinLayout: StoryObj<PropsAndArgs> = {
+  name: 'Navigation within Layout',
+  render: (args) => <Layout {...args} />,
+};
+
+const ControlledNavigation = ({ ...props }: PropsAndArgs) => {
+  const [activeItemId, setActiveItemId] = useState(props.activeItemId || PRIMARY_MENU_ITEMS[0].id);
+
+  return (
+    <Navigation
+      {...props}
+      activeItemId={activeItemId}
+      onItemClick={(item) => setActiveItemId(item.id)}
+    />
+  );
 };
 
 const Layout = ({ ...props }: PropsAndArgs) => {
@@ -212,15 +233,7 @@ const Layout = ({ ...props }: PropsAndArgs) => {
               backgroundColor={euiTheme.colors.backgroundFilledText}
             />
           }
-          navigation={
-            <Navigation
-              activeItemId={props.activeItemId}
-              isCollapsed={props.isCollapsed}
-              items={props.items}
-              logo={props.logo}
-              setWidth={setNavigationWidth}
-            />
-          }
+          navigation={<ControlledNavigation {...props} setWidth={setNavigationWidth} />}
           sidebar={
             <Box
               label="Global Sidebar"
@@ -260,8 +273,3 @@ const Layout = ({ ...props }: PropsAndArgs) => {
     </>
   );
 };
-
-export const WithinLayout: StoryObj<PropsAndArgs> = {
-  name: 'Navigation within Layout',
-  render: (args) => <Layout {...args} />,
-};