sub menu

Author: zhyale

src/app/app-routing/app-routing.module.ts

@@ -1,13 +1,13 @@
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ApplicationsComponent }      from '../applications/applications.component';
+import { ApplicationsComponent } from '../applications/applications.component';
 import { CertificatesComponent } from '../certificates/certificates.component';
-import { ApplicationDetailComponent }  from '../application-detail/application-detail.component';
+import { ApplicationDetailComponent } from '../application-detail/application-detail.component';
 import { LoginFormComponent } from '../login-form/login-form.component';
 import { CertificateDetailComponent } from '../certificate-detail/certificate-detail.component';
 import { UsermgmtComponent } from '../usermgmt/usermgmt.component';
 import { UserDetailComponent } from '../user-detail/user-detail.component';
-import { FirewallComponent } from '../firewall/firewall.component';
+import { WAFComponent } from '../waf/waf.component';
 import { PolicyComponent } from '../policy/policy.component';
 import { NodesComponent } from '../nodes/nodes.component';
 import { NodeDetailComponent } from '../node-detail/node-detail.component';
@@ -24,38 +24,42 @@ import { VipAppsComponent } from '../vip-apps/vip-apps.component';
 import { VipAppComponent } from '../vip-app/vip-app.component';
 import { RefererComponent } from '../referer/referer.component';
 import { AuthcodeRegisterComponent } from '../authcode-register/authcode-register.component';
+import { CcComponent } from '../cc/cc.component';
+import { IpPolicyComponent } from '../ip-policy/ip-policy.component';
 
 
 const routes: Routes = [
-  { path: '', redirectTo: '/index.html', pathMatch: 'full' },
-  { path: 'index.html', component: FrontpageComponent},
-  { path: 'dashboard', component: DashboardComponent},
-  { path: 'application/:id', component: ApplicationDetailComponent },
-  { path: 'applications', component: ApplicationsComponent },
-  { path: 'forwarding', component: VipAppsComponent },
-  { path: 'vip/:id', component: VipAppComponent },
-  { path: 'certificates', component: CertificatesComponent },
-  { path: 'certificate/:id', component: CertificateDetailComponent },
-  { path: 'usermgmt', component: UsermgmtComponent},
-  { path: 'appuser/:id', component: UserDetailComponent},
-  { path: 'waf', component: FirewallComponent},
-  { path: 'policy/:id', component: PolicyComponent},
-  { path: 'nodes', component: NodesComponent},
-  { path: 'node/:id', component: NodeDetailComponent},
-  { path: 'logs', component: LogsComponent},
-  { path: 'cclogs', component: CCLogsComponent},
-  { path: 'settings', component: SettingsComponent},
-  { path: 'log/:id', component: LogDetailComponent},
-  { path: 'cclog/:id', component: CCLogDetailComponent},
-  { path: 'login', component: LoginFormComponent},
-  { path: 'ssh', component: WebsshComponent },
-  { path: 'health', component: HealthCheckComponent },
-  { path: 'referring/:app_id/:host', component: RefererComponent },
-  { path: 'authcode-register', component: AuthcodeRegisterComponent}
+    { path: '', redirectTo: '/index.html', pathMatch: 'full' },
+    { path: 'index.html', component: FrontpageComponent },
+    { path: 'dashboard', component: DashboardComponent },
+    { path: 'application/:id', component: ApplicationDetailComponent },
+    { path: 'applications', component: ApplicationsComponent },
+    { path: 'forwarding', component: VipAppsComponent },
+    { path: 'vip/:id', component: VipAppComponent },
+    { path: 'certificates', component: CertificatesComponent },
+    { path: 'certificate/:id', component: CertificateDetailComponent },
+    { path: 'usermgmt', component: UsermgmtComponent },
+    { path: 'appuser/:id', component: UserDetailComponent },
+    { path: 'waf', component: WAFComponent },
+    { path: 'cc', component: CcComponent },
+    { path: 'ip-policy', component: IpPolicyComponent },
+    { path: 'policy/:id', component: PolicyComponent },
+    { path: 'nodes', component: NodesComponent },
+    { path: 'node/:id', component: NodeDetailComponent },
+    { path: 'logs', component: LogsComponent },
+    { path: 'cclogs', component: CCLogsComponent },
+    { path: 'settings', component: SettingsComponent },
+    { path: 'log/:id', component: LogDetailComponent },
+    { path: 'cclog/:id', component: CCLogDetailComponent },
+    { path: 'login', component: LoginFormComponent },
+    { path: 'ssh', component: WebsshComponent },
+    { path: 'health', component: HealthCheckComponent },
+    { path: 'referring/:app_id/:host', component: RefererComponent },
+    { path: 'authcode-register', component: AuthcodeRegisterComponent }
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
-  exports: [ RouterModule ]
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

src/app/app.component.css

@@ -6,7 +6,7 @@
     display: flex;
     align-items: top;
     justify-content: center;
-    width: 144px;
+    width: 210px;
 }
 
 mat-icon {
@@ -28,3 +28,38 @@ mat-icon {
     border: 0px;
     height: 36px;
 }
+
+.mat-sidenav {
+    background-color: #f5f5f5;
+  }
+
+.nav-panel {
+    background-color: #f5f5f5;
+    padding: 0px;
+  }
+  
+  .sub_list {
+      margin: 0px;
+  }
+  
+  .mat-expansion-panel-header {
+    padding: 0px 16px;
+    font-size: 12px;
+  }
+  
+  .mat-accordion .mat-expansion-panel:last-of-type {
+      /*
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      */
+      border-radius: 0px;
+  }
+  
+  .mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
+      height: 32px;
+  }
+  
+  
+  ::ng-deep .mat-expansion-panel-body {
+      padding: 0px 12px !important;
+  }