如何为移动设备创建菜单侧边栏

Question

我有以下代码，class hide-menu 的跨度使得菜单项的标题不显示，但在打开菜单侧边栏时它们也没有显示。 如果我删除 class 隐藏菜单，它会显示菜单标题，但当菜单侧边栏未打开时它们也会显示，所以很奇怪。 在桌面上它工作正常，但在手机/平板电脑上它就像我说的那样发生。 我将发布一些图像以完全理解。

sidebar.component.html

<nav class="sidebar-nav pt-3">
    <ul id="sidebarnav">
        <!-- First level menu -->
        <li class="sidebar-item"
            *ngFor="let sidebarnavItem of sidebarnavItems"
            [routerLinkActive]="sidebarnavItem.submenu.length != 0 ? '' : 'active'">

            <!-- <div class="" *ngIf="sidebarnavItem.extralink === true">{{sidebarnavItem.title}}</div> -->

            <a mat-menu-item class="sidebar-link waves-effect waves-dark"
                [routerLink]="sidebarnavItem.class === '' ? [sidebarnavItem.path] : null"
                [ngClass]="[sidebarnavItem.class]"
                (click)="addExpandClass(sidebarnavItem)"
                [routerLinkActive]="sidebarnavItem.submenu.length != 0 ? '' : 'active'">

                <i [ngClass]="[sidebarnavItem.icon]"></i>

                <span class="hide-menu">{{sidebarnavItem.title}}</span>
            </a>
        </li>
    </ul>
</nav>

打开侧边栏导航菜单时： 打开侧边栏导航时发生这种情况当它关闭时：当它关闭时Alosthis 是它在桌面（不是移动设备或平板电脑）上的工作方式。 它总是保持显示（如我所愿）。 这就是它在桌面上的工作方式