1 files changed, 29 insertions, 20 deletions

diff --git a/src/theme/BlogSidebar/Desktop.tsx b/src/theme/BlogSidebar/Desktop.tsx
index d06f239..9830388 100644
--- a/src/theme/BlogSidebar/Desktop.tsx
+++ b/src/theme/BlogSidebar/Desktop.tsx
@@ -5,22 +5,38 @@
  * SPDX-License-Identifier: MIT
  *
  * This file was derived from
- * https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
+ * https://github.com/facebook/docusaurus/blame/16a789904faec6b847356bad40b766a140c84b89/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
  * via the `swizzle` mechanism of Docusaurus.
  *
  * It was modified to change the sidebar title styling.
  */
 
-import Link from '@docusaurus/Link';
+import React, { memo } from 'react';
+import clsx from 'clsx';
 import { translate } from '@docusaurus/Translate';
-import { useVisibleBlogSidebarItems } from '@docusaurus/theme-common/internal';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/plugin-content-blog/client';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import type { Props as BlogSidebarContentProps } from '@theme/BlogSidebar/Content';
 import type { Props } from '@theme/BlogSidebar/Desktop';
-import React from 'react';
-import clsx from 'clsx';
 
 import styles from './Desktop.module.css';
 
-export default function BlogSidebarDesktop({ sidebar }: Props) {
+const ListComponent: BlogSidebarContentProps['ListComponent'] = ({ items }) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName={clsx(styles.sidebarItemList, 'clean-list')}
+      liClassName={styles.sidebarItem}
+      linkClassName={styles.sidebarItemLink}
+      linkActiveClassName={styles.sidebarItemLinkActive}
+    />
+  );
+};
+
+function BlogSidebarDesktop({ sidebar }: Props) {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
     <aside className="col col--3">
@@ -35,21 +51,14 @@ export default function BlogSidebarDesktop({ sidebar }: Props) {
         <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
           <span aria-hidden="true">🗓️</span> {sidebar.title}
         </div>
-        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
-          {items.map((item) => (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}
-              >
-                {item.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <BlogSidebarContent
+          items={items}
+          ListComponent={ListComponent}
+          yearGroupHeadingClassName={styles.yearGroupHeading}
+        />
       </nav>
     </aside>
   );
 }
+
+export default memo(BlogSidebarDesktop);