const navigationDefinitionWithPanel: ProjectNavigationDefinition<any> = {
  navigationTree: {
    body: [
      {
        type: 'navGroup',
        id: 'example_projet',
        title: 'Example project',
        icon: 'logoObservability',
        children: [
          {
            id: 'group:openpanel1',
            title: 'Node title',
            renderAs: 'panelOpener', // Add this 
            children: [
              ... // the rest is the same
            ],
          },

{
  id: 'group1',
  title: 'Open panel',
  renderAs: 'panelOpener', // mark the  group nav node to open a panel
  children: [
    // Here we insert nested **GROUPS**
    {
      id: 'group1',
      title: 'Group 1', // Title is optional
      children: [
        {
          link: 'group:settings.logs',
          title: 'Logs',
        },
        {
          link: 'group:settings.signals',
          title: 'Signals',
          openInNewTab: true, // New prop to open the link in a new tab
        },
        {
          link: 'group:settings.tracing',
          title: 'Tracing',
          withBadge: true, // New prop to render a badge next to the label. Its text defaults to "Beta"
        },
      ],
    },
    {
      id: 'group2',
      title: 'Group 2',
      appendHorizontalRule: true, // New prop: add a separator after the group
      children: [
        {
          id: 'group2:settings.logs',
          link: 'group:settings.logs',
          title: 'Logs',
          withBadge: true,
          badgeOptions: { text: 'NEW' }, // Change the text of the badge
        },
       ...
      ],
    },
    // Groups with accordion
    {
      id: 'group3',
      title: 'MANAGEMENT',
      renderAs: 'accordion', // Mark the group as collapsible and render it inside an accordion
      children: [
        {
          id: 'group2-A',
          title: 'Group 1',
          children: [
            {
              link: 'group:settings.logs',
              title: 'Logs',
            },
            ...
          ],
        },
      }
  ],
},