From 13607f13186b729644bbad0a98c2cdc51740041b Mon Sep 17 00:00:00 2001
From: Sarthak Lole <lolesarthak@gmail.com>
Date: Thu, 20 Aug 2026 22:59:15 +0530
Subject: [PATCH] fix: make 'All posts' blog sidebar heading clickable (#117)

Signed-off-by: Sarthak Lole <lolesarthak@gmail.com>
---
 .../src/theme/BlogSidebar/Desktop/index.js    | 47 +++++++++++++++++++
 .../BlogSidebar/Desktop/styles.module.css     | 43 +++++++++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 website/src/theme/BlogSidebar/Desktop/index.js
 create mode 100644 website/src/theme/BlogSidebar/Desktop/styles.module.css

diff --git a/website/src/theme/BlogSidebar/Desktop/index.js b/website/src/theme/BlogSidebar/Desktop/index.js
new file mode 100644
index 0000000..3100282
--- /dev/null
+++ b/website/src/theme/BlogSidebar/Desktop/index.js
@@ -0,0 +1,47 @@
+import React, {memo} from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+
+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')}>
+  <Link to="/blog">{sidebar.title}</Link>
+</div>
+
+        <BlogSidebarContent
+          items={items}
+          ListComponent={ListComponent}
+          yearGroupHeadingClassName={styles.yearGroupHeading}
+        />
+      </nav>
+    </aside>
+  );
+}
+export default memo(BlogSidebarDesktop);
diff --git a/website/src/theme/BlogSidebar/Desktop/styles.module.css b/website/src/theme/BlogSidebar/Desktop/styles.module.css
new file mode 100644
index 0000000..0e65e71
--- /dev/null
+++ b/website/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -0,0 +1,43 @@
+.sidebar {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 2rem);
+}
+
+.sidebarItemTitle {
+  font-size: var(--ifm-h3-font-size);
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+.sidebarItemList {
+  font-size: 0.9rem;
+}
+
+.sidebarItem {
+  margin-top: 0.7rem;
+}
+
+.sidebarItemLink {
+  color: var(--ifm-font-color-base);
+  display: block;
+}
+
+.sidebarItemLink:hover {
+  text-decoration: none;
+}
+
+.sidebarItemLinkActive {
+  color: var(--ifm-color-primary) !important;
+}
+
+@media (max-width: 996px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+.yearGroupHeading {
+  margin-top: 1.6rem;
+  margin-bottom: 0.4rem;
+}