fix TOC style on mobile

src/theme/TOCCollapsible/CollapseButton/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import clsx from 'clsx'
+import Translate from '@docusaurus/Translate'
+import type { Props } from '@theme/TOCCollapsible/CollapseButton'
+
+import styles from './styles.module.scss'
+import { IconArrowLeftCircle } from '@site/src/components/Icon'
+
+export default function TOCCollapsibleCollapseButton({
+  collapsed,
+  ...props
+}: Props): JSX.Element {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        'clean-btn',
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}
+    >
+      <IconArrowLeftCircle />
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component"
+      >
+        Contents
+      </Translate>
+    </button>
+  )
+}

src/theme/TOCCollapsible/CollapseButton/styles.module.scss

@@ -0,0 +1,29 @@
+.tocCollapsibleButton {
+  font-size: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1.125rem;
+}
+
+.tocCollapsibleButton > div {
+  width: 12px;
+  height: 12px;
+  transform: translateY(-4px);
+
+  svg {
+    * {
+      stroke: #909090;
+    }
+
+    transform: rotate(270deg);
+    transition: transform var(--ifm-transition-fast);
+  }
+}
+
+.tocCollapsibleButtonExpanded > div {
+  svg {
+    transform: rotate(90deg);
+  }
+}

src/theme/TOCCollapsible/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import clsx from 'clsx'
+import { useCollapsible, Collapsible } from '@docusaurus/theme-common'
+import TOCItems from '@theme/TOCItems'
+import CollapseButton from '@theme/TOCCollapsible/CollapseButton'
+import type { Props } from '@theme/TOCCollapsible'
+
+import styles from './styles.module.css'
+
+export default function TOCCollapsible({
+  toc,
+  className,
+  minHeadingLevel,
+  maxHeadingLevel,
+}: Props): JSX.Element {
+  const { collapsed, toggleCollapsed } = useCollapsible({
+    initialState: true,
+  })
+  return (
+    <div
+      className={clsx(
+        styles.tocCollapsible,
+        !collapsed && styles.tocCollapsibleExpanded,
+        className,
+      )}
+    >
+      <CollapseButton collapsed={collapsed} onClick={toggleCollapsed} />
+      <Collapsible
+        lazy
+        className={styles.tocCollapsibleContent}
+        collapsed={collapsed}
+      >
+        <div className={styles.divider}>
+          <div />
+        </div>
+        <TOCItems
+          toc={toc}
+          minHeadingLevel={minHeadingLevel}
+          maxHeadingLevel={maxHeadingLevel}
+        />
+      </Collapsible>
+    </div>
+  )
+}

src/theme/TOCCollapsible/styles.module.css

@@ -0,0 +1,44 @@
+.tocCollapsible {
+  background-color: transparent;
+  border-radius: var(--ifm-global-radius);
+  border: 1px solid #eeeef1;
+  margin: 1rem 0;
+}
+
+.tocCollapsible,
+.tocCollapsible * {
+  font-size: 0.875rem;
+  color: var(--ifm-black-color);
+}
+
+.divider {
+  width: 100%;
+  padding: 0rem 1.125rem;
+}
+
+.divider > div {
+  height: 1px;
+  background-color: #eeeef1;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  padding: 0.75rem 1.125rem;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 4px 0;
+}
+
+.tocCollapsible ul > li li {
+  margin: 0 2.25rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}