Hide side-nav during report generation (#234675)

Fixes: #227187

When we request a report we send the target element's width and use it
to create a browser window.
Therefore the element's width becomes the window width. When the
side-nav is visible on the page, it pushes the dashboard to the right
and makes it smaller. As we take only the target element's screenshot
and use the width we passed as param as image width in the pdf, it
becomes skewed.

This PR removes the side-nav from the page during the report generation.
So the dashboard uses the full window width which is the original number
we passed initially.

## To verify:

Add `Sample web logs` data.
Change the solution view in the Space to something other than Classic.
Go to `Dashboards > Sample Logs Data` and generate a PDF report.
The screenshot should not be skewed.

Add the below config to your kibana.yml
```
feature_flags.overrides:
  core.chrome.projectSideNav: 'v2'
```
Go to `Dashboards > Sample Logs Data` and generate a PDF report.
The fix should be working with the new side-nav as well.

(cherry picked from commit fa3bcdf)

# Conflicts:
#	src/core/packages/chrome/browser-internal/src/ui/project/navigation.tsx
#	src/core/packages/chrome/browser-internal/src/ui/project/sidenav_v2/fixed_layout_sidenav.tsx

Author: ersin-erdal

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

@@ -12,6 +12,9 @@ import { EuiCollapsibleNavBeta } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 import { css } from '@emotion/css';
+import classnames from 'classnames';
+import type { NavigationProps } from './navigation';
+import { Navigation } from './navigation';
 
 interface Props {
   toggleSideNav: (isVisible: boolean) => void;
@@ -26,6 +29,14 @@ export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
   toggleSideNav,
 }) => {
   const isCollapsed = useObservable(isSideNavCollapsed$, false);
+  const className = classnames(
+    'hide-for-sharing',
+    css`
+      .euiFlyoutBody__overflowContent {
+        height: 100%;
+      }
+    `
+  );
 
   return (
     <EuiCollapsibleNavBeta
@@ -36,11 +47,7 @@ export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
         overflow: 'visible',
         clipPath: `polygon(0 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 100%, 0 100%)`,
       }}
-      className={css`
-        .euiFlyoutBody__overflowContent {
-          height: 100%;
-        }
-      `}
+      className={className}
     >
       {children}
     </EuiCollapsibleNavBeta>