完全可以直接在theme-classic内实现这个需求，不需要切换主题或引入额外依赖，核心思路是通过自定义布局组件+媒体查询控制目录按钮的显示位置，具体步骤如下：

1. 自定义Layout组件 #

在项目的src/theme目录下新建Layout.js文件（已存在则直接修改），继承theme-classic的默认Layout组件，同时添加头部目录按钮的逻辑：

import React, { useState } from 'react';
import Layout from '@theme/Layout';
import { useWindowSize } from '@docusaurus/theme-common';
import IconMenu from '@theme/IconMenu';
import TOC from '@theme/TOC';

export default function CustomLayout(props) {
  const [isTocOpen, setIsTocOpen] = useState(false);
  const { width } = useWindowSize();
  // 对应theme-classic默认隐藏侧边栏的宽度阈值
  const isNarrowScreen = width < 996;

  return (
    <Layout {...props}>
      {/* 窄屏时显示头部目录按钮 */}
      {isNarrowScreen && (
        <button
          className="mobile-toc-button"
          onClick={() => setIsTocOpen(!isTocOpen)}
          aria-label="切换目录"
        >
          <IconMenu />
        </button>
      )}
      
      {props.children}

      {/* 目录弹窗逻辑 */}
      {isTocOpen && (
        <div className="mobile-toc-overlay" onClick={() => setIsTocOpen(false)}>
          <div className="mobile-toc-content" onClick={e => e.stopPropagation()}>
            <TOC />
          </div>
        </div>
      )}

      <style jsx>{`
        .mobile-toc-button {
          position: fixed;
          top: var(--ifm-navbar-height);
          right: 1rem;
          z-index: var(--ifm-z-index-fixed);
          padding: 0.5rem;
          background: var(--ifm-navbar-background-color);
          border: none;
          border-radius: var(--ifm-button-border-radius);
          cursor: pointer;
          box-shadow: var(--ifm-navbar-shadow);
        }

        /* 窄屏时隐藏原侧边栏触发按钮 */
        @media (max-width: 995px) {
          .theme-doc-sidebar-menu-button {
            display: none;
          }
        }

        .mobile-toc-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.5);
          z-index: var(--ifm-z-index-overlay);
        }

        .mobile-toc-content {
          position: absolute;
          top: 0;
          right: 0;
          width: 80%;
          max-width: 300px;
          height: 100%;
          background: var(--ifm-background-color);
          overflow-y: auto;
          padding: 1rem;
        }
      `}</style>
    </Layout>
  );
}

2. 补充全局样式（可选） #

如果需要更统一的样式控制，可在src/css/custom.css中添加规则：

/* 宽屏时强制隐藏头部按钮 */
@media (min-width: 996px) {
  .mobile-toc-button {
    display: none !important;
  }
}

/* 适配不同设备的按钮样式 */
@media (max-width: 576px) {
  .mobile-toc-button {
    right: 0.5rem;
    padding: 0.4rem;
  }
}

这样调整后，当页面宽度小于996px时，原右侧侧边栏会自动隐藏，头部的目录按钮会显示出来，点击后可展开和原侧边栏结构一致的目录面板，确保窄屏设备上目录始终可访问。

内容的提问来源于stack exchange，提问作者Doug Reeder