From 8ced5c8f2a46447fcb42c39eb7064f915ca7380e Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Wed, 9 Mar 2022 11:45:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E5=B8=A6?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BBmenu=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/core/AnimMenu.vue  | 52 +++++++++++++++++++++++++++++++
 src/components/market/TopMenu.vue | 11 ++++---
 2 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 src/components/core/AnimMenu.vue

diff --git a/src/components/core/AnimMenu.vue b/src/components/core/AnimMenu.vue
new file mode 100644
index 0000000..a439e7e
--- /dev/null
+++ b/src/components/core/AnimMenu.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="menu-toggle" @click="toggleMenu()">
+    <div class="span top" :class="{active: menuShow}"></div>
+    <div class="span middle" :class="{active: menuShow}"></div>
+    <div class="span bottom" :class="{active: menuShow}"></div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: '',
+  components: {
+  }
+})
+export default class extends Vue {
+  @Prop() private menuShow: boolean
+
+  toggleMenu() {
+    this.$emit('menu-stat-change', !this.menuShow)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.menu-toggle {
+  z-index: 999;
+  width: 28px;
+  height: 26px;
+  cursor: pointer;
+  margin-top: -7px;
+  transition: all .3s ease-out;
+  .span{
+    height: 2px;
+    margin: 7px 0 0 0;
+    visibility: visible;
+    opacity: 1;
+    border-radius: 5px;
+    background: white;
+    transition: all 0.3s ease-out;
+    backface-visibility: hidden;
+    &.top.active{
+      transform: rotate(45deg) translateX(3px) translateY(5px);
+    }
+    &.middle.active{
+      opacity: 0;
+    }
+    &.bottom.active {
+      transform: rotate(-45deg) translateX(8px) translateY(-10px);
+    }
+  }
+}
+</style>
diff --git a/src/components/market/TopMenu.vue b/src/components/market/TopMenu.vue
index f38b0a4..43a0292 100644
--- a/src/components/market/TopMenu.vue
+++ b/src/components/market/TopMenu.vue
@@ -57,9 +57,9 @@
       ><img
         class="logo"
         src="@/assets/main/p1/icon_logo_t.png"
+        alt="logo"
       /></a>
-      <label class="mobile-menu-icon" @click="toggleMenu">
-        <img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
+      <anim-menu :menu-show="menuShow" @menu-stat-change="toggleMenu"></anim-menu>
     </div>
     <div class="nav overflow" v-if="mobile" :class="{'show': menuShow}">
       <a class="navItem" href="/">Home</a>
@@ -95,6 +95,7 @@ import TopUserInfo from '@/components/market/TopUserInfo.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 import ChainManager from '@/utils/ChainManager'
 import { UserModule } from '@/store/modules/user'
+import AnimMenu from '@/components/core/AnimMenu.vue'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -104,7 +105,7 @@ declare module 'vue/types/vue' {
 
 @Component({
   name: 'Navbar',
-  components: { TopUserInfo },
+  components: { AnimMenu, TopUserInfo },
   props: ['currentTab']
 })
 export default class extends Vue {
@@ -132,8 +133,8 @@ export default class extends Vue {
     return this.chainManager.logout()
   }
 
-  toggleMenu() {
-    this.menuShow = !this.menuShow
+  toggleMenu(stat: boolean) {
+    this.menuShow = stat
     if (!this.menuShow) {
       this.subShow = false
     }