实现双侧边栏角度

如何解决实现双侧边栏角度

我正在尝试在一个 angular 项目的侧边栏中实现一个侧边栏。基本上当我点击项目时，一个新的侧边栏应该用一组完全不同的选项替换当前的侧边栏。我不知道如何创建它，到目前为止我还没有在 angular 文档中找到任何内容。

我将如何在侧边栏中创建此侧边栏？

HTML

<nav class="sidebar-wrapper">
    <div class="rightbdr"></div>
    <ul>
    <li class="sidebar-list" routerLink="dashboard" routerLinkActive="active">
        <a>
            <i class="fa fa-home" ></i>           
            <span class="leftnavtxt">Home</span>
        </a>
    </li>
    <li class="sidebar-list" routerLink="/projects/home" routerLinkActive="active">
        <a>
            <i class="fa fa-folder-open" ></i>           
            <span class="leftnavtxt">Projects</span>
        </a>
    </li>
    <li class="sidebar-list" routerLink="/profile" routerLinkActive="active">
        <a>
            <i class="fa fa-user" ></i>           
            <span class="leftnavtxt">Profile</span>
        </a>
    </li>


    <li class="sidebar-list" routerLink="/data-sources" routerLinkActive="active">
        <a>
            <i class="fa fa-database" ></i>           
            <span class="leftnavtxt">Data Sources</span>
        </a>
    </li>

    <li class="sidebar-list" routerLink="/ingestLandingPage" routerLinkActive="active">
        <a>
            <i class="fa fa-filter" ></i>           
            <span class="leftnavtxt">Ingest</span>
        </a>
    </li>
    <!-- <li class="sidebar-list" routerLink="/rdbms/customIngestion" routerLinkActive="active">
        <a>
            <i class="fa fa-filter" ></i>           
            <span class="leftnavtxt">Custom Ingestion</span>
        </a>
    </li> -->
    <!-- <li class="sidebar-list" routerLink="/ingest-flat-file" routerLinkActive="active">
        <a>
            <i class="fa fa-files-o" ></i>           
            <span class="leftnavtxt">Ingest Flat File</span>
        </a>
    </li>

    <li class="sidebar-list" routerLink="rdbmsconfig" routerLinkActive="active">
        <a>
            <i class="fa fa-database" ></i>           
            <span class="leftnavtxt">Ingest Rdbms</span>
        </a>
    </li>

    <li class="sidebar-list" routerLink="ingest-stream" routerLinkActive="active">
        <a>
            <i class="fa  fa-share-alt" ></i>           
            <span class="leftnavtxt">Ingest Stream</span>
        </a>
    </li> -->
    <li class="sidebar-list" routerLink="/jobs" routerLinkActive="active">
        <a>
            <i class="fa  fa-Wrench" ></i>           
            <span class="leftnavtxt">Jobs</span>
        </a>
    </li>

    </ul>
</nav>

TS

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-side-nav',templateUrl: './side-nav.component.html',styleUrls: ['./side-nav.component.scss']
})
export class SideNavComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

侧边栏线框 first sidbar second sidebar after clicking on projects