Display/Hide submenu only on click

I'm using PrimeNG 7.1.3 for the menubar. Currently they have the autoDisplay: true(for mouse enter) or false(for mouse click) property where the submenu shows on mouse enter or click. But when using the click, it doesn't stay that way.

So Initially the submenu is not showing on mouse hover, but when I click, the submenu shows, but when I mouse hover another menu item, the submenu hidden (this I don't want). I want the submenu to stay shown even if I mouse hover another menu item. How can I do that?

Code (from the tutorial):

app.component.html

<p-menubar [model]="items" [autoDisplay]="false">
</p-menubar>

app.component.ts

export class AppComponent implements OnInit {
  title = 'MockMenuBar2';
  items: MenuItem[];

  ngOnInit() {
    this.items = [
      ...
    ];
  }
}

Output:

Any leads would be helpful. I just don't want to hide the submenu while hovering on the other menu items.

from Display/Hide submenu only on click