html - 如何使菜单切换器在 PrimeNg 中消失

Question

我在我的 Angular 元素中使用 PrimeNg，但我找不到让菜单切换器消失的简单解决方案。我在第一张图片中解释了我拥有的东西，在第二张图片中解释了我想要的东西。我们走吧:

First picture

Second picture

我正在根据您的评论添加一些代码片段，我希望它比图片更有帮助。

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(整体):

: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;
    } 
    ::ng-deep .ui-menuitem-text {
        color: #ffffff!important;
        font-size: 14px;
    }
    ::ng-deep .ui-menuitem-icon {
        color: #ffffff;
    }
    ::ng-deep .ng-star-inserted:before {
        color: #ffffff;
    }
    ::ng-deep .pi-chevron-right:before {
        color: #ffffff;
    }
    ::ng-deep .ng-star-inserted{
        background-color: transparent!important;
        color: #ffffff;
    }
    ::ng-deep .ng-menu-link{
        color: #ffffff!important;
    }
    ::ng-deep .ui-sidebar-mask{
        background-color: transparent;
    }
    ::ng-deep .ui-button-icon-only{
        border: none!important;
        // background-color: transparent!important;
    }
    ::ng-deep .ng-reflect-ng-class{
        z-index: 0!important;
    }
    ::ng-deep .ui-sidebar-active{
        border: none!important;
        background-color: transparent!important;
        box-shadow: none!important;
        width: 272px!important;
    }
    ::ng-deep .ui-sidebar-left{
        border: none!important;
        background-color: transparent!important;
    }
    ::ng-deep .ui-sidebar{
        border: none!important;
        background-color: transparent!important;
    }
    ::ng-deep .ui-button-icon-only{
        border: none!important;
        background-color: transparent!important;
    }
}

.sidebar-button
{
    margin-left: 230px;
    margin-top: 4px;
}
.sidebar
{
    margin-top: 86px;
    width: calc(100vh - 86px);
}

.global-logotype-graphics
{
    position: absolute;

    width: 100%;

    bottom: 0px;
    right: 0px;
}
.global-navigation-menu
{
    position: relative;
    top: 6px;
}
.global-navigation-menu-small
{
    position: relative;
}
.global-pegasus-graphics
{
    position: absolute;

    width: 74%;

    right: 13%;
    left: 13%;
    bottom: 10%;
}
.navigation
{
    position: relative;

    height: calc(100vh - 86px);
    width: 272px;

    margin-top: calc(86px - 8px);
    margin-left: -16px;

    background-image: linear-gradient(#33435B, #0076BB);
}
.navigation-small
{
    position: relative;

    height: calc(100vh - 86px);
    width: 62px;

    margin-top: 0px;
    margin-left: -8px;

    background-image: linear-gradient(#33435B, #0076BB);
}

Answer 1

添加此 css 以删除菜单切换器

::ng-deep .ui-panelmenu-icon {
    display: none;
}