add drawer menu

llkui · Dec 3, 2020 · e2e0ad9 · e2e0ad9
1 parent 3a3f232
commit e2e0ad9
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 5 deletions.
diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html
@@ -1,6 +1,6 @@
 <nz-layout class="layout">
-  <nz-sider>
-    <div class="logo">
+  <nz-sider *ngIf="drawerInfo.content.menu">
+    <div class="logo" *ngIf="drawerInfo.content.menuHeader">
       <img src="./assets/images/logo.svg" alt="">
       <h1>Sky Admin</h1>
     </div>
@@ -39,8 +39,8 @@ <h1>Sky Admin</h1>
       </ng-container>
     </ul>
   </nz-sider>
-  <nz-layout class="right-layout">
-    <nz-header>
+  <nz-layout [class.right-layout]="drawerInfo.content.menu">
+    <nz-header *ngIf="drawerInfo.content.header">
       <div style="flex: 1 1 0%;"></div>
       <div class="header-right">
         <div class="header-action header-search">
@@ -211,10 +211,40 @@ <h1>Sky Admin</h1>
       <div class="orna-circle" style="left: 40%;"></div>
       <router-outlet></router-outlet>
     </nz-content>
-    <nz-footer>
+    <nz-footer *ngIf="drawerInfo.content.footer">
       sky-admin
       <i nz-icon nzType="copyright" nzTheme="outline"></i>
       2020 Implement By llkui
     </nz-footer>
   </nz-layout>
+  <div class="drawer-handle" (click)="changeDrawer()" [class.open]="visible">
+    <ng-container *ngIf="!visible; then settingIcon else closeIcon"></ng-container>
+    <ng-template #settingIcon>
+      <i nz-icon nzType="setting" nzTheme="outline"></i>
+    </ng-template>
+    <ng-template #closeIcon>
+      <i nz-icon nzType="close" nzTheme="outline"></i>
+    </ng-template>
+  </div>
 </nz-layout>
+<nz-drawer [nzClosable]="false" [nzVisible]="visible" [nzWidth]="300" nzPlacement="right" [nzContent]="drawerContent"
+  [nzWrapClassName]="'nz-drawer-handle'" (nzOnClose)="close()">
+  <ng-template #drawerContent>
+    <div>
+      <div>
+        <h3>内容区域</h3>
+        <ul nz-list [nzSplit]="false">
+          <li nz-list-item nzNoFlex *ngFor="let contentItem of contentList">
+            <ul nz-list-item-actions>
+              <nz-list-item-action>
+                <nz-switch [(ngModel)]="drawerInfo.content[contentItem.type]" nzSize="small"
+                  (ngModelChange)="changeContent(contentItem.type)"></nz-switch>
+              </nz-list-item-action>
+            </ul>
+            {{contentItem.name}}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </ng-template>
+</nz-drawer>
diff --git a/src/app/admin/admin.component.scss b/src/app/admin/admin.component.scss
@@ -121,3 +121,27 @@ nz-content {
 nz-footer {
   text-align: center;
 }
+
+.drawer-handle {
+  position: fixed;
+  top: 240px;
+  right: 0;
+  background: #1890ff;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: right 0.3s;
+
+  i {
+    color: #ffffff;
+    font-size: 20px;
+  }
+
+  &.open {
+    right: 300px;
+    z-index: 9999;
+  }
+}
diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
@@ -24,6 +24,21 @@ export class AdminComponent implements OnInit {
         message: 3,
         task: 4,
     };
+    visible = false;
+    contentList = [
+        { type: 'header', name: '顶栏' },
+        { type: 'footer', name: '页脚' },
+        { type: 'menu', name: '菜单' },
+        { type: 'menuHeader', name: '菜单头' },
+    ];
+    drawerInfo = {
+        content: {
+            header: true,
+            footer: true,
+            menu: true,
+            menuHeader: true
+        }
+    };
 
     constructor(
         private platformLocation: PlatformLocation,
@@ -270,4 +285,20 @@ export class AdminComponent implements OnInit {
     readMore(type) {
         this.message.success('Click on view more');
     }
+
+    close() {
+        this.visible = false;
+    }
+
+    changeDrawer() {
+        this.visible = !this.visible;
+    }
+
+    changeContent(type) {
+        if (type === 'menu') {
+            const e = document.createEvent('Event');
+            e.initEvent('resize', true, true);
+            window.dispatchEvent(e);
+        }
+    }
 }
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
@@ -18,6 +18,8 @@ import { NzListModule } from 'ng-zorro-antd/list';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzMessageModule } from 'ng-zorro-antd/message';
 import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 import { AuthGuard } from './../service/auth-guard.service';
 
@@ -57,6 +59,8 @@ import { ChangelogComponent } from './changelog/changelog.component';
         NzEmptyModule,
         NzMessageModule,
         NzTagModule,
+        NzDrawerModule,
+        NzSwitchModule,
         AdminRoutingModule
     ],
     providers: [

diff --git a/src/app/admin/changelog/changelog.component.html b/src/app/admin/changelog/changelog.component.html
@@ -19,6 +19,8 @@
       <nz-timeline-item>2020-11-27 optimize menu</nz-timeline-item>
       <nz-timeline-item>2020-11-30 add header</nz-timeline-item>
       <nz-timeline-item>2020-12-01 add user login</nz-timeline-item>
+      <nz-timeline-item>2020-12-02 add user register and register-result</nz-timeline-item>
+      <nz-timeline-item>2020-12-03 add drawer menu</nz-timeline-item>
     </nz-timeline>
   </nz-card>
 </div>
diff --git a/src/styles.scss b/src/styles.scss
@@ -171,6 +171,16 @@
   background-color: #ffffff;
 }
 
+// drawer-handle
+.nz-drawer-handle {
+  h3 {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
 .form-advanced-form-style-errorPopover {
   .ant-popover-inner-content {
     min-width: 256px;