优化移动端侧边栏

themes/butterfly/source/css/_layout/sidebar.styl

@@ -94,4 +94,51 @@
     .site-page.group:not(.hide) + .menus_item_child
       max-height: 1000px
       opacity: 1
-      transform: scaleY(1)
+      transform: scaleY(1)
+
+    #sidebar-aside-wrapper
+      display: none
+
+html.mobile-aside-in-sidebar
+  #content-inner
+    > #aside-content
+      display: none
+
+  #sidebar
+    #sidebar-menus
+      #sidebar-aside-wrapper
+        display: block
+        padding: 20px
+
+        &:empty
+          display: none
+
+        #aside-content
+          margin-top: 0
+          width: 100%
+
+          .card-widget
+            margin-bottom: 16px
+
+          .sticky_layout
+            position: static
+            position: initial
+            top: auto
+
+          #card-toc
+            position: relative
+            right: auto
+            bottom: auto
+            z-index: auto
+            max-width: none
+            max-height: none
+            width: 100%
+            transition: none
+            transform: none
+            transform-origin: center top
+
+            &.open
+              transform: none
+
+            .toc-content
+              max-height: 60vh

themes/butterfly/source/css/nav.css

@@ -175,6 +175,41 @@
   background: rgba(255, 255, 255, 0.05); 
 }
 
+@media screen and (max-width: 768px) {
+  #ls-menu-container.ls-mobile-safe {
+    position: static !important;
+    padding: 0 10px;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel {
+    position: fixed !important;
+    top: 70px !important;
+    left: 12px !important;
+    right: 12px !important;
+    width: auto !important;
+    max-width: calc(100vw - 24px) !important;
+    max-height: calc(100vh - 94px) !important;
+    margin-top: 0 !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 16px;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel::before {
+    display: none;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel .ls-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  #ls-menu-panel.ls-mobile-safe-panel .ls-grid a {
+    min-width: 0;
+    padding: 10px;
+  }
+}
+
 #nav.show-title .nav-page-title {
   display: flex !important;
   opacity: 1 !important;
@@ -200,4 +235,4 @@
 
 #nav #blog-info {
   overflow: visible !important;
-}
+}