add custom TOCCollapsible

packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import clsx from 'clsx'
+import Translate from '@docusaurus/Translate'
+import styles from './styles.module.css'
+import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react'
+export default function TOCCollapsibleCollapseButton({ collapsed, ...props }) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        'clean-btn',
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}
+    >
+      <div />
+      <Typography variant="body2">
+        <Translate
+          id="theme.TOCCollapsible.toggleButtonLabel"
+          description="The label used by the button on the collapsible TOC component"
+        >
+          On this page
+        </Translate>
+      </Typography>
+      {!collapsed ? <ArrowUpIcon /> : <ArrowDownIcon />}
+    </button>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.css

@@ -0,0 +1,13 @@
+.tocCollapsibleButton {
+  font-size: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0.8rem;
+  width: 100%;
+  border: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.tocCollapsibleButtonExpanded::after {
+  transform: none;
+}

packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx

@@ -0,0 +1,38 @@
+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 styles from './styles.module.css'
+export default function TOCCollapsible({
+  toc,
+  className,
+  minHeadingLevel,
+  maxHeadingLevel,
+}) {
+  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}
+      >
+        <TOCItems
+          toc={toc}
+          minHeadingLevel={minHeadingLevel}
+          maxHeadingLevel={maxHeadingLevel}
+        />
+      </Collapsible>
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css

@@ -0,0 +1,25 @@
+.tocCollapsible {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  border: 1px solid rgb(var(--lsd-border-primary)) !important;
+  border-top: none !important;
+  padding: 0.2rem 0;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 0.4rem 0.8rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}