Xiaolige/CasinosManager/src/app/content/content.component.html

<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">CasinosManager</a>
    <ul class="nav-top px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">{{userinfo.userName}}</a>
        </li>
        <li class="nav-item text-nowrap">
            <button type="button" class="btn btn-success" style="box-shadow: 0px" (click)="logout()">注销</button>
        </li>
    </ul>
</nav>

<div class="container-fluid">
    <div class="row">
        <div id="accordion" class="col-md-2 accordion">
            <div class="card">
                <div class="card-header">
                    <a class="list-group-item list-group-item-action list-body-header" (click)="collapse(0)">类别一</a>
                </div>
                <div name="collapseOne" [ngClass]="cardActives[0]">
                    <div class="card-body">
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action  list-body-item" routerLink="/content/student">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-users">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                学生</a>
                            <a href="#" class="list-group-item list-group-item-action list-body-item" routerLink="/content/course">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-bar-chart-2">
                                    <line x1="18" y1="20" x2="18" y2="10"></line>
                                    <line x1="12" y1="20" x2="12" y2="4"></line>
                                    <line x1="6" y1="20" x2="6" y2="14"></line>
                                </svg>
                                课程
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="list-group-item list-group-item-action list-body-header" (click)="collapse(1)">类别二</a>
                </div>
                <div name="collapseTwo" [ngClass]="cardActives[1]">
                    <div class="card-body">
                        <div class="list-group">
                            <a class="list-group-item list-group-item-action list-body-item">First item</a>
                            <a class="list-group-item list-group-item-action list-body-item">Second item</a>
                            <a class="list-group-item list-group-item-action list-body-item">Third item</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <main class="col-md-9 ml-sm-auto col-lg-10 px-4 main">
            <div class="flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <router-outlet></router-outlet>
            </div>
        </main>
    </div>
</div>