fix: fix changelog button on mobile

Author: Justineo

components/OneChangelogButton.vue

@@ -5,11 +5,21 @@
 >
   <veui-button
     ui="s"
+    class="normal"
     @click="open = !open"
   >
     <veui-icon name="clock"/>
     {{ t('changelog') }}
   </veui-button>
+  <div
+    class="mobile"
+    @click="open = !open"
+  >
+    <veui-icon
+      class="collapsed-icon"
+      name="clock"
+    />
+  </div>
   <veui-drawer
     :title="t('changelog')"
     :open.sync="open"
@@ -50,28 +60,45 @@ export default {
 }
 </script>
 
-<style scoped>
-.trigger {
-  position: absolute;
-  right: 60px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-}
+<style lang="stylus" scoped>
+.trigger
+  position absolute
+  right 60px
+  height 36px
+  display flex
+  align-items center
 
-.changelog {
-  padding: 12px 16px;
-}
+.changelog
+  padding 12px 16px
 
-@media (max-width: 480px) {
-  .trigger {
-    top: 80px;
-    right: 30px;
-    height: auto;
-  }
+.mobile
+  display none
 
-  .drawer {
-    --dls-drawer-width: calc(100vw - 16px);
-  }
-}
+@media (max-width 480px)
+  .normal
+    display none
+
+  .mobile
+    display flex
+    align-items center
+    justify-content center
+    width 36px
+    height 36px
+    position fixed
+    top 140px
+    right 0
+    border 1px solid #e2e6f0
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    background-color #fff
+    box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
+    font-size 20px
+
+  .trigger
+    top 80px
+    right 30px
+    height auto
+
+  .drawer
+    --dls-drawer-width calc(100vw - 16px)
 </style>

components/OneToc.vue

@@ -95,6 +95,7 @@ export default {
 
     &.expanded
       transform translateX(0)
+      box-shadow 0 0 36px rgba(0, 0, 0, 0.1)
 
   .toggle
     z-index -1
@@ -112,7 +113,7 @@ export default {
     background-color #fff
     box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
     font-size 20px
-    transition transform 0.3s, opacity 0.3s
+    z-index 1
 
     &::before
       content ""