51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
import React, {memo} from 'react';
|
|
import clsx from 'clsx';
|
|
import {translate} from '@docusaurus/Translate';
|
|
import {
|
|
useVisibleBlogSidebarItems,
|
|
BlogSidebarItemList,
|
|
} from '@docusaurus/plugin-content-blog/client';
|
|
import BlogSidebarContent from '@theme/BlogSidebar/Content';
|
|
import styles from './styles.module.css';
|
|
const ListComponent = ({items}) => {
|
|
return (
|
|
<BlogSidebarItemList
|
|
items={items}
|
|
ulClassName={clsx(styles.sidebarItemList, 'clean-list')}
|
|
liClassName={styles.sidebarItem}
|
|
linkClassName={styles.sidebarItemLink}
|
|
linkActiveClassName={styles.sidebarItemLinkActive}
|
|
/>
|
|
);
|
|
};
|
|
function BlogSidebarDesktop({sidebar}) {
|
|
const items = useVisibleBlogSidebarItems(sidebar.items);
|
|
return (
|
|
<aside className="col col--3">
|
|
<nav
|
|
className={clsx(styles.sidebar, 'thin-scrollbar')}
|
|
aria-label={translate({
|
|
id: 'theme.blog.sidebar.navAriaLabel',
|
|
message: 'Blog recent posts navigation',
|
|
description: 'The ARIA label for recent posts in the blog sidebar',
|
|
})}>
|
|
<div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
|
|
{sidebar.title}
|
|
</div>
|
|
<BlogSidebarContent
|
|
items={items}
|
|
ListComponent={ListComponent}
|
|
yearGroupHeadingClassName={styles.yearGroupHeading}
|
|
/>
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|
|
export default memo(BlogSidebarDesktop);
|