From 9dfd42df7a54cbbb1a25d140ff811eeecc2f81c8 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 30 Mar 2022 15:15:02 +0800
Subject: [PATCH 1/3] fix(theme-classic): blog mobile sidebar fixes

---
 .../docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx  | 4 ++--
 .../src/theme/BlogSidebar/styles.module.css                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
index ad478860fe42..b58ee46815d4 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
@@ -22,7 +22,7 @@ function BlogSidebarContent({
 }: Props & {className?: string}): JSX.Element {
   return (
     <nav
-      className={clsx(styles.sidebar, 'thin-scrollbar', className)}
+      className={clsx('thin-scrollbar', className)}
       aria-label={translate({
         id: 'theme.blog.sidebar.navAriaLabel',
         message: 'Blog recent posts navigation',
@@ -58,7 +58,7 @@ export default function BlogSidebar(props: Props): JSX.Element | null {
     return (
       <NavbarSecondaryMenuFiller
         component={BlogSidebarContent}
-        props={{...props, className: 'margin-left--md'}}
+        props={{...props, className: 'margin-left--md margin-right--md'}}
       />
     );
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
index d3e7700af508..11cfa8aad08b 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.sidebar {
+.sidebarDesktop {
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
   overflow-y: auto;
   position: sticky;

From 33d2f33e6a4a4911157fe3841afabed9845a7df4 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 30 Mar 2022 15:37:42 +0800
Subject: [PATCH 2/3] remove sidebar class

---
 .../src/theme/BlogSidebar/styles.module.css                   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
index 11cfa8aad08b..97c12ac98911 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
@@ -43,8 +43,4 @@
   .sidebarDesktop {
     display: none;
   }
-
-  .sidebar {
-    top: 0;
-  }
 }

From 04daa615b8874674f1e8cb454000777b1eb9ee89 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 30 Mar 2022 16:54:11 +0800
Subject: [PATCH 3/3] use menu styles on mobile

---
 .../src/theme-classic.d.ts                    | 22 +++++++-
 .../src/theme/BlogLayout/index.tsx            |  6 +-
 .../src/theme/BlogSidebar/Desktop/index.tsx   | 45 +++++++++++++++
 .../{ => Desktop}/styles.module.css           |  4 +-
 .../src/theme/BlogSidebar/Mobile/index.tsx    | 38 +++++++++++++
 .../src/theme/BlogSidebar/index.tsx           | 56 +++----------------
 6 files changed, 114 insertions(+), 57 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
 rename packages/docusaurus-theme-classic/src/theme/BlogSidebar/{ => Desktop}/styles.module.css (95%)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 9f3c48ed3da0..2e07f3a43833 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -47,13 +47,33 @@ declare module '@theme/BlogListPaginator' {
   export default function BlogListPaginator(props: Props): JSX.Element;
 }
 
-declare module '@theme/BlogSidebar' {
+declare module '@theme/BlogSidebar/Desktop' {
+  import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
+
+  export interface Props {
+    readonly sidebar: BlogSidebar;
+  }
+
+  export default function BlogSidebarDesktop(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogSidebar/Mobile' {
   import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
 
   export interface Props {
     readonly sidebar: BlogSidebar;
   }
 
+  export default function BlogSidebarMobile(props: Props): JSX.Element;
+}
+
+declare module '@theme/BlogSidebar' {
+  import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
+
+  export interface Props {
+    readonly sidebar?: BlogSidebar;
+  }
+
   export default function BlogSidebar(props: Props): JSX.Element;
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx
index 009eef93276d..30d68822c650 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx
@@ -20,11 +20,7 @@ export default function BlogLayout(props: Props): JSX.Element {
     <Layout {...layoutProps}>
       <div className="container margin-vert--lg">
         <div className="row">
-          {hasSidebar && (
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-          )}
+          <BlogSidebar sidebar={sidebar} />
           <main
             className={clsx('col', {
               'col--7': hasSidebar,
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
new file mode 100644
index 000000000000..15e5cecb70d5
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
@@ -0,0 +1,45 @@
+/**
+ * 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 from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+
+import styles from './styles.module.css';
+import type {Props} from '@theme/BlogSidebar/Desktop';
+
+export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
+  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>
+        <ul className={styles.sidebarItemList}>
+          {sidebar.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>
+      </nav>
+    </aside>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
similarity index 95%
rename from packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
rename to packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
index 97c12ac98911..3ca0d4b8d5e7 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.sidebarDesktop {
+.sidebar {
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
   overflow-y: auto;
   position: sticky;
@@ -40,7 +40,7 @@
 }
 
 @media (max-width: 996px) {
-  .sidebarDesktop {
+  .sidebar {
     display: none;
   }
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx
new file mode 100644
index 000000000000..a07967840419
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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 from 'react';
+import Link from '@docusaurus/Link';
+import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import type {Props} from '@theme/BlogSidebar/Mobile';
+
+function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
+  return (
+    <ul className="menu__list">
+      {sidebar.items.map((item) => (
+        <li key={item.permalink} className="menu__list-item">
+          <Link
+            isNavLink
+            to={item.permalink}
+            className="menu__link"
+            activeClassName="menu__link--active">
+            {item.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function BlogSidebarMobile(props: Props): JSX.Element {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
index b58ee46815d4..742f4bd42781 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
@@ -6,61 +6,19 @@
  */
 
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import {translate} from '@docusaurus/Translate';
-import {
-  NavbarSecondaryMenuFiller,
-  useWindowSize,
-} from '@docusaurus/theme-common';
+import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
+import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
+import {useWindowSize} from '@docusaurus/theme-common';
 import type {Props} from '@theme/BlogSidebar';
-import styles from './styles.module.css';
 
-function BlogSidebarContent({
-  sidebar,
-  className,
-}: Props & {className?: string}): JSX.Element {
-  return (
-    <nav
-      className={clsx('thin-scrollbar', className)}
-      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>
-      <ul className={styles.sidebarItemList}>
-        {sidebar.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>
-    </nav>
-  );
-}
-
-export default function BlogSidebar(props: Props): JSX.Element | null {
+export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
   const windowSize = useWindowSize();
-  if (props.sidebar.items.length === 0) {
+  if (!sidebar?.items.length) {
     return null;
   }
   // Mobile sidebar doesn't need to be server-rendered
   if (windowSize === 'mobile') {
-    return (
-      <NavbarSecondaryMenuFiller
-        component={BlogSidebarContent}
-        props={{...props, className: 'margin-left--md margin-right--md'}}
-      />
-    );
+    return <BlogSidebarMobile sidebar={sidebar} />;
   }
-  return <BlogSidebarContent {...props} className={styles.sidebarDesktop} />;
+  return <BlogSidebarDesktop sidebar={sidebar} />;
 }