[SharedUX Project Navigation] Fix issue with items in panel openers when side nav is collapsed

src/platform/packages/shared/shared-ux/chrome/navigation/__jest__/build_nav_tree.test.tsx

@@ -209,7 +209,7 @@ describe('builds navigation tree', () => {
               children: [
                 {
                   ...panelOpenerNode,
-                  href: '/foo/bar', // Panel opener with a link should not be converted to accordion
+                  href: '/foo/bar', // Panel opener with a link should also be converted to accordion when side nav is collapsed
                 },
               ],
             },
@@ -220,7 +220,7 @@ describe('builds navigation tree', () => {
 
       const accordionButtonLabel = queryAllByTestId('accordionToggleBtn').map((c) => c.textContent);
 
-      expect(accordionButtonLabel).toEqual(['Group 1']); // Only 1 accordion button (top level)
+      expect(accordionButtonLabel).toEqual(['Group 1', 'Nested Group 1']);
       unmount();
     }
   });

src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_section/navigation_section_ui.tsx

@@ -61,8 +61,7 @@ const getRenderAs = (
   navNode: ChromeProjectNavigationNode,
   { isSideNavCollapsed }: { isSideNavCollapsed: boolean }
 ): RenderAs => {
-  if (isSideNavCollapsed && navNode.renderAs === 'panelOpener' && !nodeHasLink(navNode))
-    return 'accordion'; // When the side nav is collapsed, we render panel openers as accordions if they don't have a landing page
+  if (isSideNavCollapsed && navNode.renderAs === 'panelOpener') return 'accordion'; // When the side nav is collapsed, we render panel openers as accordions
   if (navNode.renderAs) return navNode.renderAs;
   if (!navNode.children) return 'item';
   return DEFAULT_RENDER_AS;
@@ -108,7 +107,7 @@ const getTestSubj = (navNode: ChromeProjectNavigationNode, isActive = false): st
   });
 };
 
-const serializeNavNode = (
+export const serializeNavNode = (
   navNode: ChromeProjectNavigationNode,
   {
     isSideNavCollapsed,

src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/navigation_panel.tsx

@@ -13,14 +13,13 @@ import {
   EuiPanel,
   EuiWindowEvent,
   keys,
-  useEuiTheme,
 } from '@elastic/eui';
 import React, { useCallback, type FC } from 'react';
 import classNames from 'classnames';
 
 import type { PanelSelectedNode } from '@kbn/core-chrome-browser';
 import { usePanel } from './context';
-import { getNavPanelStyles, getPanelWrapperStyles } from './styles';
+import { navPanelStyles, panelWrapperStyles } from './styles';
 
 const getTestSubj = (selectedNode: PanelSelectedNode | null): string | undefined => {
   if (!selectedNode) return;
@@ -33,7 +32,6 @@ const getTestSubj = (selectedNode: PanelSelectedNode | null): string | undefined
 };
 
 export const NavigationPanel: FC = () => {
-  const { euiTheme } = useEuiTheme();
   const { isOpen, close, getContent, selectedNode, selectedNodeEl } = usePanel();
 
   // ESC key closes PanelNav
@@ -68,22 +66,21 @@ export const NavigationPanel: FC = () => {
     [close, selectedNodeEl]
   );
 
-  const panelWrapperClasses = getPanelWrapperStyles();
-  const sideNavPanelStyles = getNavPanelStyles(euiTheme);
-  const panelClasses = classNames('sideNavPanel', 'eui-yScroll', sideNavPanelStyles);
-
   if (!isOpen) {
     return null;
   }
 
+  const panelClasses = classNames('sideNavPanel', 'eui-yScroll');
+
   return (
     <>
       <EuiWindowEvent event="keydown" handler={onKeyDown} />
-      <div className={panelWrapperClasses}>
-        <EuiFocusTrap autoFocus css={{ height: '100%' }}>
+      <div css={panelWrapperStyles}>
+        <EuiFocusTrap autoFocus style={{ height: '100%' }}>
           <EuiOutsideClickDetector onOutsideClick={onOutsideClick}>
             <EuiPanel
               className={panelClasses}
+              css={navPanelStyles}
               hasShadow
               borderRadius="none"
               paddingSize="none"

src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/styles.ts

@@ -7,12 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { type EuiThemeComputed } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { Theme, css } from '@emotion/react';
 
 const PANEL_WIDTH = '248px';
 
-export const getPanelWrapperStyles = () => css`
+export const panelWrapperStyles = css`
   clip-path: polygon(
     0 0,
     150% 0,
@@ -25,7 +24,7 @@ export const getPanelWrapperStyles = () => css`
   top: 0;
 `;
 
-export const getNavPanelStyles = (euiTheme: EuiThemeComputed<{}>) => css`
+export const navPanelStyles = ({ euiTheme }: Theme) => css`
   background-color: ${euiTheme.colors.backgroundBaseSubdued};
   height: 100%;
   width: ${PANEL_WIDTH};