refactor(theme-classic): blog mobile secondary menu use consistent styles (#7068)

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;
 }
 

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,

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>
+  );
+}

packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -40,11 +40,7 @@
 }
 
 @media (max-width: 996px) {
-  .sidebarDesktop {
+  .sidebar {
     display: none;
   }
-
-  .sidebar {
-    top: 0;
-  }
 }

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}
+    />
+  );
+}

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(styles.sidebar, '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'}}
-      />
-    );
+    return <BlogSidebarMobile sidebar={sidebar} />;
   }
-  return <BlogSidebarContent {...props} className={styles.sidebarDesktop} />;
+  return <BlogSidebarDesktop sidebar={sidebar} />;
 }