diff --git a/src/components/ExpanderComponent.vue b/src/components/ExpanderComponent.vue
index 8d814c5..497debd 100644
--- a/src/components/ExpanderComponent.vue
+++ b/src/components/ExpanderComponent.vue
@@ -22,6 +22,7 @@ onMounted(() => {
 
   watch(content, (newSize) => {
     if (!collapsed.value) contentWrapperRef.value!.style.height = `${newSize}px`
+    console.log(newSize)
   })
 
   content.value = contentDesiredSizeWrapperRef.value!.scrollHeight
@@ -47,6 +48,7 @@ onMounted(() => {
         border-unset
         bg-transparent
         cursor-pointer
+        flex="~ items-center justify-center"
       >
         <ChevronRightIcon
           :class="['h-5 w-5 transition-all duration-300', collapsed ? 'rotate-0' : 'rotate-90']"
@@ -55,7 +57,7 @@ onMounted(() => {
       </button>
     </div>
 
-    <div ref="contentWrapperRef" transition-all duration-300 h-0>
+    <div ref="contentWrapperRef" transition-all duration-300>
       <div ref="contentDesiredSizeWrapperRef">
         <slot></slot>
       </div>
diff --git a/src/components/SidebarComponent.vue b/src/components/SidebarComponent.vue
index 3ebe9fb..486181c 100644
--- a/src/components/SidebarComponent.vue
+++ b/src/components/SidebarComponent.vue
@@ -7,6 +7,7 @@ import rawActivityList from 'virtual:activity-list.json'
 import rawNewsList from 'virtual:news-list.json'
 import type { PageData } from '@/data/pagedata'
 import { groupByYearMonth } from '@/utils'
+import ExpanderComponent from './ExpanderComponent.vue'
 
 const activityListGrouped = groupByYearMonth(rawActivityList as PageData[])
 const newsListGrouped = groupByYearMonth(rawNewsList as PageData[])
@@ -64,73 +65,82 @@ defineExpose({ toggleSidebar })
         <span text-xl font-semibold>LCPU</span>
       </a>
 
-      <h3 m-b-0>
-        <a href="/activities/" class="text-unset!" decoration-none @click="toggleSidebar()">活动</a>
-      </h3>
-
-      <div flex="~ col" box-border>
-        <div
-          v-for="activityGroup in activityListGrouped"
-          :key="activityGroup.year + '-' + activityGroup.month"
-          flex="~ col gap-2"
-          class="group"
-          border-t-1
-          border-gray-200
-          dark:border-dark-200
-          border-t-solid
-          p-y-3
-        >
-          <span text-xs text-gray-500 dark:text-light-900
-            >{{ activityGroup.year }} 年 {{ activityGroup.month }} 月
-          </span>
-          <a
-            v-for="activity in activityGroup.items"
-            @click="toggleSidebar()"
-            :href="activity.contentUrl"
-            text-wrap
-            :key="activity.title"
-            class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
-            :class="{
-              'text-gray-800! dark:text-white! font-medium': currentTitle === activity.title,
-            }"
-          >
-            {{ activity.title }}</a
+      <ExpanderComponent m-t-4>
+        <template #header>
+          <h3 m-0>
+            <a href="/activities/" class="text-unset!" decoration-none @click="toggleSidebar()"
+              >活动</a
+            >
+          </h3>
+        </template>
+        <div flex="~ col" box-border>
+          <div
+            v-for="activityGroup in activityListGrouped"
+            :key="activityGroup.year + '-' + activityGroup.month"
+            flex="~ col gap-2"
+            class="group"
+            border-t-1
+            border-gray-200
+            dark:border-dark-200
+            border-t-solid
+            p-y-3
           >
+            <span text-xs text-gray-500 dark:text-light-900
+              >{{ activityGroup.year }} 年 {{ activityGroup.month }} 月
+            </span>
+            <a
+              v-for="activity in activityGroup.items"
+              @click="toggleSidebar()"
+              :href="activity.contentUrl"
+              text-wrap
+              :key="activity.title"
+              class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
+              :class="{
+                'text-gray-800! dark:text-white! font-medium': currentTitle === activity.title,
+              }"
+            >
+              {{ activity.title }}</a
+            >
+          </div>
         </div>
-      </div>
+      </ExpanderComponent>
 
-      <h3 m-b-0>
-        <a href="/news/" class="text-unset!" decoration-none @click="toggleSidebar()">新闻</a>
-      </h3>
-      <div flex="~ col" box-border>
-        <div
-          v-for="newsGroup in newsListGrouped"
-          :key="newsGroup.year + '-' + newsGroup.month"
-          flex="~ col gap-2"
-          p-y-3
-          class="group"
-          border-t-1
-          border-gray-200
-          dark:border-dark-200
-          border-t-solid
-        >
-          <span text-xs text-gray-500 dark:text-light-900
-            >{{ newsGroup.year }} 年 {{ newsGroup.month }} 月
-          </span>
-          <a
-            v-for="news in newsGroup.items"
-            @click="toggleSidebar()"
-            :href="news.contentUrl"
-            text-wrap
-            :key="news.title"
-            class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
-            :class="{
-              'text-gray-800! dark:text-light-400! font-medium': currentTitle === news.title,
-            }"
-            >{{ news.title }}</a
+      <ExpanderComponent m-t-4>
+        <template #header>
+          <h3 m-0>
+            <a href="/news/" class="text-unset!" decoration-none @click="toggleSidebar()">新闻</a>
+          </h3>
+        </template>
+        <div flex="~ col" box-border>
+          <div
+            v-for="newsGroup in newsListGrouped"
+            :key="newsGroup.year + '-' + newsGroup.month"
+            flex="~ col gap-2"
+            p-y-3
+            class="group"
+            border-t-1
+            border-gray-200
+            dark:border-dark-200
+            border-t-solid
           >
+            <span text-xs text-gray-500 dark:text-light-900
+              >{{ newsGroup.year }} 年 {{ newsGroup.month }} 月
+            </span>
+            <a
+              v-for="news in newsGroup.items"
+              @click="toggleSidebar()"
+              :href="news.contentUrl"
+              text-wrap
+              :key="news.title"
+              class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
+              :class="{
+                'text-gray-800! dark:text-light-400! font-medium': currentTitle === news.title,
+              }"
+              >{{ news.title }}</a
+            >
+          </div>
         </div>
-      </div>
+      </ExpanderComponent>
     </div>
   </div>
 </template>