修改左侧菜单 变成2级菜单

CasinosManager/src/app/content/content.component.css

@@ -11,14 +11,26 @@ line-height: inherit;
     float:left !important; /* 向左漂移，将竖排变为横排 */
 }
 
-.sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 100;
-    padding: 48px 0 0;
-    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+.accordion{
+  margin-top: 100px;  
+}
+.card-header{
+    padding: 0px !important;
+}
+.card-body{
+    padding: 0px !important;
+}
+
+.list-group-item{
+    border: 0px !important;
+}
+
+.accordion>.card .card-header {
+     margin-bottom: 0px;
+}
+
+.list-body-item{
+    padding-left: 50px;
 }
 
 .nav-top{

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

@@ -12,43 +12,59 @@
 
 <div class="container-fluid">
     <div class="row">
-        <<nav class="col-md-2 d-none d-md-block bg-light sidebar">
-            <div class="sidebar-sticky">
-                <ul class="nav flex-column">
-                    <li class="nav-item">
-                        <a class="nav-link" 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>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" 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>
-                    </li>
-
-                </ul>
+        <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>
-            </nav>>
-
-            <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 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>
-            </main>
+            </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>

CasinosManager/src/app/content/content.component.ts

@@ -11,6 +11,7 @@ import { TokenAuthService, UserInfo } from '../shared/service-proxy/token-auth.s
 export class ContentComponent implements OnInit {
 
   userinfo:UserInfo;
+  cardActives: string[]=['show','collapse'];
 
   constructor(
     private _sessionService: AppSessionService,
@@ -22,6 +23,11 @@ export class ContentComponent implements OnInit {
     this.userinfo = this._sessionService.user;
   }
 
+  collapse(cardIndex){
+    this.cardActives[cardIndex] = this.cardActives[cardIndex] == 'show'?'collapse':'show';
+    console.log(this.cardActives[cardIndex]);
+  }
+
   logout(){
     this._tokenAuthService.logout()
     .subscribe((result)=>{