[Serverless] Fix sidenav responsiveness (#163700)

## Summary

I was not sure if there are other plans for these stats, but I went
ahead and cleaned those up:

### Issue 1. Sidenav groups are collapsed on a smaller screen 

#### Before 

![Screenshot 2023-08-11 at 11 28
54](a3202f96-05c2-4792-8e9e-a25ea5e471cf)

#### After 

<img width="1456" alt="Screenshot 2023-08-11 at 14 13 23"
src="3e52d05f-12fa-4d38-addb-538239e7d8d1">

### Issue 2. Collapsed sidenav state is empty 

We reserved this for icons, but until we have them, I think it makes
sense to just hide the bar:

#### Berfore

![Screenshot 2023-08-11 at 11 29
01](e8f5f474-15c5-46d1-95cc-c2580d3c7050)


#### After

<img width="1456" alt="Screenshot 2023-08-11 at 14 14 35"
src="99adadb4-637b-404b-9909-fe7e78e0224e">


### Issue 3. Navigation is not initialized when Kibana loaded with
hidden navigation

We initialize the navigation as we render the nav tree (the sidenav).
But if the sidenav is hidden, then the navigation is not initialized.
**So, for example, breadcrumbs are not displayed correctly until the nav
is opened.** As a hack, we will always render the tree, but will make it
hidden.

#### Before 

<img width="1296" alt="Screenshot 2023-08-11 at 14 35 14"
src="499e4a97-b5c3-405d-968b-bae753f15b99">


#### After 

<img width="1296" alt="Screenshot 2023-08-11 at 14 34 37"
src="ae51dea4-8d98-40f6-b3bc-c4d5df8e97fa">

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

@@ -61,7 +61,7 @@ describe('Header', () => {
     const toggleNav = async () => {
       fireEvent.click(await screen.findByTestId('toggleNavButton')); // click
 
-      expect(screen.queryAllByText('Hello, goodbye!')).toHaveLength(0); // title is not shown
+      expect(await screen.findByText('Hello, goodbye!')).not.toBeVisible();
 
       fireEvent.click(await screen.findByTestId('toggleNavButton')); // click again
 

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

@@ -8,10 +8,10 @@
 
 import React from 'react';
 import { css } from '@emotion/react';
-import { EuiCollapsibleNav, EuiCollapsibleNavProps, useIsWithinMinBreakpoint } from '@elastic/eui';
+import { EuiCollapsibleNav, EuiCollapsibleNavProps } from '@elastic/eui';
 
 const SIZE_EXPANDED = 248;
-const SIZE_COLLAPSED = 48;
+const SIZE_COLLAPSED = 0;
 
 export interface ProjectNavigationProps {
   isOpen: boolean;
@@ -31,28 +31,30 @@ export const ProjectNavigation: React.FC<ProjectNavigationProps> = ({
     flex-direction: row,
   `;
 
-  // on small screen isOpen hides the nav,
-  // on larger screen isOpen makes it smaller
   const DOCKED_BREAKPOINT = 's' as const;
-  const isCollapsible = useIsWithinMinBreakpoint(DOCKED_BREAKPOINT);
-  const isVisible = isCollapsible ? true : isOpen;
-  const isCollapsed = isCollapsible ? !isOpen : false;
+  const isVisible = isOpen;
 
   return (
-    <EuiCollapsibleNav
-      className="projectLayoutSideNav"
-      css={collabsibleNavCSS}
-      isOpen={isVisible}
-      showButtonIfDocked={true}
-      onClose={closeNav}
-      isDocked={true}
-      size={isCollapsed ? SIZE_COLLAPSED : SIZE_EXPANDED}
-      hideCloseButton={false}
-      dockedBreakpoint={DOCKED_BREAKPOINT}
-      ownFocus={false}
-      button={button}
-    >
-      {!isCollapsed && children}
-    </EuiCollapsibleNav>
+    <>
+      {
+        /* must render the tree to initialize the navigation, even if it shouldn't be visible */
+        !isOpen && <div hidden>{children}</div>
+      }
+      <EuiCollapsibleNav
+        className="projectLayoutSideNav"
+        css={collabsibleNavCSS}
+        isOpen={isVisible /* only affects docked state */}
+        showButtonIfDocked={true}
+        onClose={closeNav}
+        isDocked={true}
+        size={isVisible ? SIZE_EXPANDED : SIZE_COLLAPSED}
+        hideCloseButton={false}
+        dockedBreakpoint={DOCKED_BREAKPOINT}
+        ownFocus={false}
+        button={button}
+      >
+        {isOpen && children}
+      </EuiCollapsibleNav>
+    </>
   );
 };

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

@@ -164,6 +164,7 @@ export const NavigationSectionUI: FC<Props> = ({ navNode, items = [] }) => {
     >
       <EuiText color="default">
         <EuiSideNav
+          mobileBreakpoints={/* turn off responsive behavior */ []}
           items={filteredItems.map((item) =>
             navigationNodeToEuiItem(item, { navigateToUrl, basePath })
           )}

packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx

@@ -71,7 +71,11 @@ export const RecentlyAccessed: FC<Props> = ({
       initialIsOpen={!defaultIsCollapsed}
       data-test-subj={`nav-bucket-recentlyAccessed`}
     >
-      <EuiSideNav items={navItems} css={styles.euiSideNavItems} />
+      <EuiSideNav
+        items={navItems}
+        css={styles.euiSideNavItems}
+        mobileBreakpoints={/* turn off responsive behavior */ []}
+      />
     </EuiCollapsibleNavGroup>
   );
 };