diff --git a/components/header.vue b/components/header.vue
index 1997372..1cb02e1 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -36,7 +36,12 @@
             placeholder="SEARCH"
           >
           </b-form-input>
-          <img class="ml-2" src="~assets/image/icon/menu.png" :alt="$t('common.menu')" />
+          <img 
+            class="ml-2" 
+            src="~assets/image/icon/menu.png" 
+            :alt="$t('common.menu')" 
+            @click="$refs.menuDrawerRef.drawer=true"
+          />
         </div>
       </div>
 
@@ -51,11 +56,15 @@
         </nuxt-link>
       </nav>
     </header>
+
+    <MenuDrawer ref="menuDrawerRef" />
   </div>
 </template>
 
 <script>
+import MenuDrawer from './menu-drawer.vue';
 export default {
+  components: { MenuDrawer },
   data() {
     return {
       searchVal: '',
@@ -125,7 +134,6 @@ nav {
   .nav-link-item {
     height: 100%;
     padding: 0 1.4375rem;
-    z-index: 99999;
     >a {
       color: #151516;
     }
diff --git a/components/menu-drawer.vue b/components/menu-drawer.vue
new file mode 100644
index 0000000..f5bb8f0
--- /dev/null
+++ b/components/menu-drawer.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-drawer
+    :visible.sync="drawer"
+    direction="ltr"
+    :with-header="false"
+    size="50%"
+  >
+    <div class="p-4">
+      <img class="mb-3" src="../assets/image/mob-logo.png" alt="logo" />
+      <el-tree
+        :data="menuList"
+        node-key="id"
+        highlight-current
+        @node-click="handleNodeClick"
+        :props="{
+          children: 'children',
+          label: 'name'
+        }"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'MenuDrawer',
+  data() {
+    return {
+      drawer: false,
+      menuList: [
+        { name: this.$t('menu.Home'), href: '/' },
+        { name: this.$t('menu.AboutUs'), href: '/abou-us' },
+        { 
+          name: this.$t('menu.Products'), 
+          href: undefined,
+          children: [
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+          ]
+        },
+        { name: this.$t('menu.News'), href: '/news' },
+        { name: this.$t('menu.Exhibition'), href: '/exhibition' },
+        { name: this.$t('menu.ContactUs'), href: '/contact-us' },
+        { name: this.$t('menu.Feedback'), href: '/feedback' },
+      ]
+    }
+  },
+  methods: {
+    handleNodeClick(data) {
+      if (data.href) {
+        this.$router.push(data.href)
+        this.drawer = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .is-current {
+  > .el-tree-node__content {
+    color: #015fe8;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 2528d0e..fde4c90 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -59,7 +59,7 @@ export default {
     '~plugins/axios',
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/i18n.js", ssr: true },
-    { src: "~plugins/element-tree.js", ssr: true },
+    { src: "~plugins/element-ui.js", ssr: true },
     { src: "~plugins/vue-piczoom.js", ssr: false },
     { src: "~plugins/swiper.js", ssr: false },
   ],
diff --git a/plugins/element-tree.js b/plugins/element-ui.js
similarity index 65%
rename from plugins/element-tree.js
rename to plugins/element-ui.js
index 77bc76b..1567525 100644
--- a/plugins/element-tree.js
+++ b/plugins/element-ui.js
@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import { 
   // 添加你需要的其他组件
-  Tree
+  Tree,
+  Drawer
 } from 'element-ui'
 
-Vue.use(Tree)
\ No newline at end of file
+Vue.use(Tree)
+Vue.use(Drawer)
\ No newline at end of file