Struggling with PrimeNg implementation in my Angular project, I am unable to find a simple solution to hide the menu toggler. Allow me to illustrate my current setup in the first image and what I desire in the second. Let's dive in:
In response to your comments, below are some code snippets that might be more helpful than images.
HTML:
...
<p-panelMenu class="global-navigation-menu" [model]="items" [multiple]="false"></p-panelMenu>
...
TS:
...
this.items =
[
{ separator: true },
{
label: 'Dashboard', icon: 'pi pi-fw pi-globe', items: [
{
label: 'Projects', icon: 'pi pi-fw pi-bars', items: [
{
label: 'Mock project', items: [
{ label: 'Version 1' }
]
},
{ label: 'Empty project' }
]
}
]
}
];
...
CSS (entire):
:host {
::ng-deep .ui-panelmenu-header > a {
border: none!important;
background-color: transparent!important;
color: #ffffff!important;
}
.ui-panelmenu-icon {
color: #ffffff!important;
}
::ng-deep .ui-panelmenu-content {
border: none!important;
background-color: transparent!important;
color: #ffffff;
}
... (CSS continues)