source

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

@@ -38,8 +38,7 @@
       background: var(--sidebar-menu-bg)
       box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
       addBorderRadius(10)
-      .menus_item
-        margin: 10px 0
+
       .site-page
         @extend .limit-one-line
         position: relative
@@ -50,20 +49,17 @@
         font-size: 1.15em
         cursor: pointer
         addBorderRadius(6)
-        border: var(--icat-style-border-always)
-        background: var(--icat-essay-card-bg)
-        font-size: 14px
-        border-radius: 12px
-
 
         &:hover
           background: var(--text-bg-hover)
+          box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
           color: var(--white)
+          transition: all .2s ease
+          transform: translateX(3px)
 
         i:first-child
           width: 15%
           text-align: left
-          padding-left: 10px
 
         &.group
           & > i:last-child
@@ -77,34 +73,25 @@
               transform: rotate(90deg)
 
             & + .menus_item_child
-              display: none
+              overflow: hidden
+              max-height: 0
+              opacity: 0
+              transform: scaleY(0)
+              transform-origin: top
 
       .menus_item_child
         margin: 0
         padding-left: 25px
+        max-height: 0
         list-style: none
+        opacity: 0
+        transition: transform .3s ease, opacity .3s ease, max-height .3s ease
+        transform: scaleY(0)
+        transform-origin: top
+        will-change: transform, opacity, max-height
 
-#sidebar
-  #sidebar-menus
-    .icat_menus_item
-      display: inline-block
-      width: 50%
-
-      .site-page
-        text-align: center
-        margin: 4px
-        display: flex
-        flex-direction: column
-        align-items: center
-        padding: 8px 0
-        border-radius: 12px
-        font-size: 14px
-
-        i:first-child
-          padding-left: 0
-
-        & > .icat-essay
-          font-weight: 500
-
-        span
-          margin-top: -8px
+    // 當父元素沒有 .hide 類時，顯示子目錄
+    .site-page.group:not(.hide) + .menus_item_child
+      max-height: 1000px
+      opacity: 1
+      transform: scaleY(1)