Reported by @ryankeairns

Describe the bug

The EUI Flyout System has Figma designs here: https://www.figma.com/design/SvpfCqaZPb2iAYnPtd0Gnr/Kibana-UI?node-id=2991-18130.

In the current implementation, our "main" flyouts are injecting a title into the menu bar, which is wrong: the "main" flyout should conventionally use EuiFlyoutHeader and not have a title in the menu bar.

Impact and severity

We have an incorrect implementation of the design that needs to be fixed.

Environment and versions

Minimum reproducible sandbox

const SandBoxFlyout: React.FC = () => (
  <EuiFlyout
    session="start"
    onClose={() => {}}
    flyoutMenuProps={{ title: 'Sandbox Flyout. This title should not show up in the menu bar!' }}
  >
    <EuiFlyoutHeader>
      <EuiTitle>
        <h2>Main Flyout</h2>
      </EuiTitle>
    </EuiFlyoutHeader>
    <EuiFlyoutBody>
      <EuiText>
        <p>This is a sandbox flyout for testing purposes.</p>
      </EuiText>
    </EuiFlyoutBody>
    <EuiFlyout
      onClose={() => {}}
      flyoutMenuProps={{ title: 'Sandbox Flyout Child' }}
    >
      <EuiFlyoutBody>
        <EuiText>
          <p>This is a child flyout.</p>
        </EuiText>
      </EuiFlyoutBody>
    </EuiFlyout>
  </EuiFlyout>
);

To Reproduce

Minimum reproducible sandbox

Expected behavior

The Flyout Menu should not have a title, if it is the "main" flyout

Screenshots (Optional)

• Copied from Figma, a complete picture of a flyout session looks like this:
  
• Using the "Minimum reproducible sandbox" code, our implementation results in this:
  

Additional context (Optional)

I think we should add a hideTitle prop to the EuiFlyoutMenu component, and set that to true if the flyout is a main flyout in the managed flyout system. We want the title to still render though, because there is an automatic aria-labelledby attribute that can be added to the EuiFlyout and references the title - so perhaps hideTitle should set a display: none style on the title.