I am attempting to create a sidebar menu in Angular 18 using dynamic nested menus based on the following JSON structure,

export interface NavigationItem {
  id: string;
  title: string;
  type: 'item' | 'collapse' | 'group';
  translate?: string;
  icon?: string;
  hidden?: boolean;
  url?: string;
  classes?: string;
  groupClasses?: string;
  exactMatch?: boolean;
  external?: boolean;
  target?: boolean;
  breadcrumbs?: boolean;
  children?: NavigationItem[];
  link?: string;
  description?: string;
  path?: string;
}

export const NavigationItems: NavigationItem[] = [
  {
    id: 'Dashboard',
    title: 'Dashboard',
    type: 'group',
    classes: 'first-group',
    icon: 'icon-navigation',
    children: [
      {
        id: 'Dashboard',
        title: 'Dashboard',
        type: 'collapse',
        icon: 'dashboard',
        groupClasses: 'arrow-edge',
        children: [
          {
            id: 'default',
            title: 'Default',
            type: 'item',
            url: '/dashboard/default',
            breadcrumbs: false
          },
          {
            id: 'analytics',
            title: 'Analytics',
            type: 'item',
            url: '/dashboard/analytics',
            breadcrumbs: false
          },
          {
            id: 'finance',
            title: 'Finance',
            type: 'item',
            url: '/dashboard/finance',
            breadcrumbs: false
          }
        ]
      },
      {
        id: 'component',
        title: 'Components',
        type: 'item',
        classes: 'nav-item',
        url: '/components/basic/alert',
        icon: 'gold',
        target: true,
        breadcrumbs: false
      }
    ]
  }
];

I am encountering difficulties in correctly rendering this nested menu structure in my Angular application’s sidebar. Despite attempting to use recursion, the sidebar is not displaying as expected.

What I’ve Tried:

• I have implemented recursive methods/functions to iterate through the NavigationItems array.
• I have reviewed Angular documentation and various tutorials on dynamic nested menus but have not found a solution that resolves my specific issue.
• I have ensured that all necessary Angular modules and components are imported correctly.

Specific Questions:

• How can I properly implement recursion to dynamically render nested menus based on the provided NavigationItems structure?
• Are there any specific Angular techniques or best practices I should follow to ensure correct rendering of nested menus?

Additional Context:

• Angular version: 18
• I am using Angular CLI for development.
• The sidebar component is a crucial part of my application’s
  navigation system.