diff options
Diffstat (limited to 'src/theme/BlogSidebar/Desktop.tsx')
-rw-r--r-- | src/theme/BlogSidebar/Desktop.tsx | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/src/theme/BlogSidebar/Desktop.tsx b/src/theme/BlogSidebar/Desktop.tsx new file mode 100644 index 0000000..d06f239 --- /dev/null +++ b/src/theme/BlogSidebar/Desktop.tsx | |||
@@ -0,0 +1,55 @@ | |||
1 | /* | ||
2 | * Copyright (c) Facebook, Inc. and its affiliates. | ||
3 | * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com> | ||
4 | * | ||
5 | * SPDX-License-Identifier: MIT | ||
6 | * | ||
7 | * This file was derived from | ||
8 | * https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx | ||
9 | * via the `swizzle` mechanism of Docusaurus. | ||
10 | * | ||
11 | * It was modified to change the sidebar title styling. | ||
12 | */ | ||
13 | |||
14 | import Link from '@docusaurus/Link'; | ||
15 | import { translate } from '@docusaurus/Translate'; | ||
16 | import { useVisibleBlogSidebarItems } from '@docusaurus/theme-common/internal'; | ||
17 | import type { Props } from '@theme/BlogSidebar/Desktop'; | ||
18 | import React from 'react'; | ||
19 | import clsx from 'clsx'; | ||
20 | |||
21 | import styles from './Desktop.module.css'; | ||
22 | |||
23 | export default function BlogSidebarDesktop({ sidebar }: Props) { | ||
24 | const items = useVisibleBlogSidebarItems(sidebar.items); | ||
25 | return ( | ||
26 | <aside className="col col--3"> | ||
27 | <nav | ||
28 | className={clsx(styles.sidebar, 'thin-scrollbar')} | ||
29 | aria-label={translate({ | ||
30 | id: 'theme.blog.sidebar.navAriaLabel', | ||
31 | message: 'Blog recent posts navigation', | ||
32 | description: 'The ARIA label for recent posts in the blog sidebar', | ||
33 | })} | ||
34 | > | ||
35 | <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}> | ||
36 | <span aria-hidden="true">🗓️</span> {sidebar.title} | ||
37 | </div> | ||
38 | <ul className={clsx(styles.sidebarItemList, 'clean-list')}> | ||
39 | {items.map((item) => ( | ||
40 | <li key={item.permalink} className={styles.sidebarItem}> | ||
41 | <Link | ||
42 | isNavLink | ||
43 | to={item.permalink} | ||
44 | className={styles.sidebarItemLink} | ||
45 | activeClassName={styles.sidebarItemLinkActive} | ||
46 | > | ||
47 | {item.title} | ||
48 | </Link> | ||
49 | </li> | ||
50 | ))} | ||
51 | </ul> | ||
52 | </nav> | ||
53 | </aside> | ||
54 | ); | ||
55 | } | ||