From 750526cb7be3c318ea3dfbfec81d3e142a78783f Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 1 Jun 2023 04:54:26 +0900
Subject: [PATCH] add custom TOCCollapsible

---
 .../TOCCollapsible/CollapseButton/index.tsx   | 30 +++++++++++++++
 .../CollapseButton/styles.module.css          | 13 +++++++
 .../src/client/theme/TOCCollapsible/index.tsx | 38 +++++++++++++++++++
 .../theme/TOCCollapsible/styles.module.css    | 25 ++++++++++++
 4 files changed, 106 insertions(+)
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/index.tsx
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.css
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css

diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/index.tsx
new file mode 100644
index 0000000..4c9aedb
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/CollapseButton/styles.module.css
new file mode 100644
index 0000000..ee35c40
--- /dev/null
+++ b/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;
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/index.tsx
new file mode 100644
index 0000000..c201063
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/TOCCollapsible/styles.module.css
new file mode 100644
index 0000000..fd81641
--- /dev/null
+++ b/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;
+}