docs: mobile drawer menu trigger (#6927)

Author: kovsu

site/src/index.less

@@ -1,19 +1,5 @@
 @import './theme/static/index.less';
 
-.drawer {
-  position: fixed;
-  z-index: 9999;
-  -webkit-transition: width 0s ease 0.3s, height 0s ease 0.3s,
-    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: width 0s ease 0.3s, height 0s ease 0.3s,
-    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: width 0s ease 0.3s, height 0s ease 0.3s,
-    transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: width 0s ease 0.3s, height 0s ease 0.3s,
-    transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
 .drawer > * {
   -webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
     -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
@@ -31,14 +17,6 @@
     -webkit-box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 }
 
-.drawer.drawer-open {
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
 .drawer .drawer-mask {
   background: #000;
   opacity: 0;
@@ -63,12 +41,12 @@
 }
 
 .drawer-handle {
-  position: absolute;
-  top: 72px;
+  position: fixed;
+  top: 100px;
   width: 41px;
   height: 40px;
   cursor: pointer;
-  z-index: 0;
+  z-index: 100;
   text-align: center;
   line-height: 40px;
   font-size: 16px;
@@ -82,38 +60,9 @@
   -ms-flex-align: center;
   align-items: center;
   background: #fff;
-}
-
-.drawer-handle-icon {
-  width: 14px;
-  height: 2px;
-  background: #333;
-  position: relative;
-  -webkit-transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
-.drawer-handle-icon:after,
-.drawer-handle-icon:before {
-  content: '';
-  display: block;
-  position: absolute;
-  background: #333;
-  width: 100%;
-  height: 2px;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
-.drawer-handle-icon:before {
-  top: -5px;
-}
-
-.drawer-handle-icon:after {
-  top: 5px;
+  -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+  border-radius: 0 4px 4px 0;
 }
 
 .drawer-left,
@@ -129,31 +78,10 @@
   height: 100%;
 }
 
-.drawer-left.drawer-open,
-.drawer-right.drawer-open {
-  width: 100%;
-}
-
-.drawer-left.drawer-open.no-mask,
-.drawer-right.drawer-open.no-mask {
-  width: 0;
-}
-
 .drawer-left {
   top: 0;
   left: 0;
 }
 .drawer-left .ant-drawer-body {
   padding: 0;
 }
-
-.drawer-left .drawer-handle {
-  right: -40px;
-  border-radius: 0 4px 4px 0;
-}
-
-.drawer-left .drawer-handle,
-.drawer-left.drawer-open .drawer-content-wrapper {
-  -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-}

site/src/layouts/index.vue

@@ -13,22 +13,20 @@
       <template v-if="isMobile">
         <a-drawer
           key="mobile-menu"
+          v-model:visible="visible"
           :closable="false"
           placement="left"
           class="drawer drawer-left"
-          :visible="visible"
           wrapper-class-name="drawer-wrapper"
           width="60%"
         >
           <surelyVueVue />
           <Menu :menus="dataSource" :active-menu-item="activeMenuItem" :is-zh-c-n="isZhCN" />
-          <template #handle>
-            <div class="drawer-handle" @click="handleClickShowButton">
-              <close-outlined v-if="visible" :style="iconStyle" />
-              <MenuOutlined v-else :style="iconStyle" />
-            </div>
-          </template>
         </a-drawer>
+        <div class="drawer-handle" @click="handleClickShowButton">
+          <close-outlined v-if="visible" :style="iconStyle" />
+          <MenuOutlined v-else :style="iconStyle" />
+        </div>
       </template>
       <template v-else>
         <a-col :xxxl="4" :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">