feat: update

src/app/elements/leftbar/leftbar.component.html

-<div id="wrapper">
-  <nav class="navbar-default navbar-static-side" role="navigation">
-    <div class="sidebar-collapse">
-      <ul class="nav">
-        <li class="nav-header">
-          <div class="dropdown profile-element">
-            <div href="http://www.jumpserver.org" target="_blank">
-              <img alt="image" height="55" src="/static/imgs/logo-text.png" style="margin-left: 10px">
-            </div>
-          </div>
-          <div class="clearfix"></div>
-          <div class="logo-element">
-            <img alt="image" height="40" src="/static/imgs/logo.png">
-          </div>
-        </li>
-        <li *ngFor="let bar of leftbar">
-          <a href="#">
-            <i class="{{bar.class}}"></i>
-            <span class="nav-label">{{bar.name|trans}}</span>
-            <span class="{{bar.label}}"></span>
-          </a>
-          <ul class="nav nav-second-level collapse">
-            <li *ngFor="let child of bar.child"><a>{{child.name|trans}}</a></li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </nav>
-</div>
+<mat-sidenav-container>
+  <mat-sidenav #sidenav mode="side" opened="true" class="example-sidenav"
+               [fixedInViewport]="options.value.fixed" [fixedTopGap]="options.value.top"
+               [fixedBottomGap]="options.value.bottom">
+    <nav>
+      <div class="header">
+        <a href="http://www.jumpserver.org" target="_blank">
+          <img alt="image" height="55" src="/static/imgs/logo-text.png" style="margin-left: 10px">
+        </a>
+        <div class="clearfix"></div>
+        <div class="logo-element">
+          <img alt="image" height="40" src="/static/imgs/logo.png">
+        </div>
+      </div>
+      <div class="body">
+        <ul class="nav metismenu nav-frist-level">
+          <li *ngFor="let bar of leftbar;let i = index" [ngClass]="{'active':i==active}">
+            <a (click)="gotoLink(bar.link,i,-1)">
+              <i class="{{bar.class}}"></i>
+              <span class="nav-label">{{bar.name|trans}}</span>
+              <span class="{{bar.label}}"></span>
+            </a>
+            <ul class="nav nav-second-level collapse">
+              <li *ngFor="let child of bar.child;let ii = index" [ngClass]="{'active':ii==active2}">
+                <a (click)="gotoLink(child.link,i,ii)">{{child.name|trans}}</a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </mat-sidenav>
+  <div class="navbar-header">
+    <button class="navbar-minimalize minimalize-styl-2 btn btn-primary " (click)="sidenav.toggle()"><i
+      class="fa fa-bars"></i></button>
+  </div>
+</mat-sidenav-container>

src/app/elements/leftbar/leftbar.component.scss

-nav {
-  height: 100%;
+
+li a {
+  background-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  color: rgb(167, 177, 194);
+  cursor: pointer;
+  display: block;
   font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background-color: #2f4050;
   font-size: 13px;
+  font-weight: 600;
+  height: 46px;
+  line-height: 18.5714px;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  padding-bottom: 14px;
+  padding-left: 25px;
+  padding-right: 20px;
+  padding-top: 14px;
+  position: relative;
+  text-align: left;
+  text-decoration-color: rgb(167, 177, 194);
+  text-decoration-line: none;
+  text-decoration-style: solid;
+  text-size-adjust: 100%;
+  width: 220px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.nav-header {
-  padding: 0;
-  width: 100%;
+li.active > a {
+  width: 216px;
+  color: white;
 }
 
-.navbar-default {
-  background-color: #2f4050;
-  border-color: #2f4050;
+li.active ul.nav.nav-second-level li {;
+  border-bottom-style: none;
+  border-bottom-width: 0px;
+  box-sizing: border-box;
+  color: rgb(103, 106, 108);
+  display: block;
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 32px;
+  line-height: 18.5714px;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  position: relative;
+  text-align: left;
+  text-size-adjust: 100%;
+  visibility: visible;
+  width: 216px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+li.active ul.nav.nav-second-level {
+  box-sizing: border-box;
+  color: rgb(103, 106, 108);
+  display: block;
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 18.5714px;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  padding-left: 0px;
+  text-align: left;
+  text-size-adjust: 100%;
+  visibility: visible;
+  width: 216px;
+  -webkit-margin-after: 0px;
+  -webkit-margin-before: 0px;
+  -webkit-margin-end: 0px;
+  -webkit-margin-start: 0px;
+  -webkit-padding-start: 0px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
 }
 
-.nav-header, body.mini-navbar .nav-header {
-  padding: 0;
-  background: #202c37;
+mat-sidenav {
+  background-color: #2f4050;
 }
 
-.profile-element div:last-child a {
-  line-height: 60px;
-  width: 150px;
-  float: left;
-  font-size: 22px;
-  color: #1ab394;
+nav {
+  width: 220px;
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
 }
 
-.logo-element {
-  padding: 10px 0;
+div.header {
+  background-color: #202c37;
 }
-.nav.nav-tabs li.active {
-    background-color: #FFF;
+
+div.body {
+  background-color: #2f4050;
+  height: 100%;
 }
-.nav.nav-tabs li > a {
-    max-height: 38px;
+
+li:hover {
+  color: white !important;
 }
 
-.nav.nav-tabs li.active a {
-    border: none;
+.nav-second-level li a {
+  padding: 7px 10px 7px 52px;
 }

src/app/elements/leftbar/leftbar.component.ts

 import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
   selector: 'app-element-leftbar',
@@ -10,7 +11,8 @@ export class ElementLeftbarComponent implements OnInit {
     {
       'name': 'Dashboard',
       'class': 'fa fa-dashboard',
-      'label': 'label label-info pull-right'
+      'label': '',
+      'link': '/'
     },
     {
       'name': 'Users',
@@ -77,21 +79,41 @@ export class ElementLeftbarComponent implements OnInit {
       'label': 'fa arrow',
       'child': [
         {
-          'name': 'Task'
+          'name': 'Task',
+          'link': '/task'
         },
       ]
     },
     {
       'name': 'Settings',
       'class': 'fa fa-gears',
-      'label': 'label label-info pull-right'
+      'label': '',
+      'link': '/luna/setting'
     },
   ];
+  options: FormGroup;
+  active: number;
+  active2: number;
 
-  constructor() {
+  constructor(fb: FormBuilder) {
+    this.options = fb.group({
+      'fixed': true,
+      'top': 0,
+      'bottom': 0,
+    });
   }
 
+
   ngOnInit() {
+    this.active = 6;
+    this.active2 = 0;
   }
 
+  gotoLink(link: string, index: number, index2: number) {
+    if (link) {
+      window.location.href = link;
+    }
+    this.active = index;
+    this.active2 = index2;
+  }
 }

src/app/setting-page/setting-page.component.scss

 .pace-done {
   width: 100%;
+  height: 100%;
   padding: 0;
 }