feat: add transition for collapsible sidebar

docs/.island/config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'islandjs';
+import { defineConfig, DefaultTheme } from 'islandjs';
 import { pluginCheckLinks } from '@islandjs/plugin-check-links';
 import { createRequire } from 'module';
 
@@ -76,15 +76,14 @@ export default defineConfig({
         content: 'https://discord.gg/Nvy4YSerjM'
       }
     ],
-
     footer: {
       message: 'Released under the MIT License.',
       copyright: 'Copyright © 2022-present Xingyuan Yang'
     }
   }
 });
 
-function getSidebar(lang: 'zh' | 'en') {
+function getSidebar(lang: 'zh' | 'en'): DefaultTheme.Sidebar {
   const { getLink, getText } = getI18nHelper(lang);
 
   return {

packages/island/src/theme-default/components/Siderbar/index.tsx

@@ -60,22 +60,17 @@ export function SideBar(props: Props & ComponentPropsWithIsland) {
       newCollapseList[index] = !newCollapseList[index];
       setCollapseList(newCollapseList);
     };
-    const collapsibleIcon =
-      item.collapsible || collapsed ? (
-        collapsed ? (
-          <div
-            className="i-carbon-chevron-right"
-            onClick={toggleCollapse}
-            cursor-pointer="~"
-          ></div>
-        ) : (
-          <div
-            className="i-carbon-chevron-down"
-            cursor-pointer="~"
-            onClick={toggleCollapse}
-          ></div>
-        )
-      ) : null;
+    const collapsibleIcon = (item.collapsible || collapsed) && (
+      <div
+        className="i-carbon-chevron-right"
+        onClick={toggleCollapse}
+        cursor-pointer="~"
+        style={{
+          transition: 'transform 0.2s ease-out',
+          transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)'
+        }}
+      ></div>
+    );
     return (
       <section key={item.text} block="~" not-first="divider-top mt-4">
         <div
@@ -92,8 +87,9 @@ export function SideBar(props: Props & ComponentPropsWithIsland) {
         <div
           mb="1.4 sm:1"
           style={{
-            height: collapsed ? 0 : 'auto',
-            display: collapsed ? 'none' : 'block'
+            transition: 'height 0.2s ease-out',
+            height: collapsed ? 0 : `${(item?.items.length || 0) * 28}px`,
+            overflow: 'hidden'
           }}
         >
           {item?.items?.map((item) => (