feat(docs) use rc-collapse on the config docs (tauri-apps#81)

* feat(docs) use rc-collapse on the config docs

* fix: Changed rc-collapse for a custom component

Co-authored-by: Laegel <[email protected]>

Author: lucasfernog

src/css/custom.css

@@ -206,3 +206,4 @@ h2 > [class^='ti-'] {
 [class*='announcementBar_'] {
   height: auto !important;
 }
+

src/theme/Collapse/index.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import styles from './styles.module.css'
+
+export const Collapse = ({ children, isOpened = false, header }) => {
+  const [isOpenedState, toggle] = useState(isOpened)
+
+  const collapseStyle = isOpenedState
+    ? {
+        display: 'block',
+      }
+    : {
+        display: 'none',
+      }
+
+  return (
+    <div>
+      <div className={classnames(styles.header, isOpenedState ? styles.active : '')} onClick={() => toggle(!isOpenedState)}>
+        {header}
+      </div>
+      <div className={styles.content} style={collapseStyle}>
+        {children}
+      </div>
+    </div>
+  )
+}

src/theme/Collapse/styles.module.css

@@ -0,0 +1,28 @@
+.content {
+  display: none;
+}
+
+.header {
+  height: 40px;
+  display: flex;
+  align-content: center;
+}
+
+.header::after {
+  background-image: var(--ifm-menu-link-sublist-icon);
+  background-size: 2rem 2rem;
+  background-position: center;
+  content: ' ';
+  display: inline-block;
+  height: 1.25rem;
+  width: 1.25rem;
+  transition: transform var(--ifm-transition-fast) linear;
+  transform: rotate(90deg);
+  margin-top: -8px;
+  background-color: var(--ifm-background-color);
+}
+
+
+.header.active::after {
+  transform: rotate(180deg);
+}

src/theme/Properties/index.js

@@ -1,35 +1,61 @@
 import React from 'react'
 import classnames from 'classnames'
 import styles from './styles.module.css'
+import { Collapse } from '@theme/Collapse'
 
 import { Opening, Closing } from '@theme/CurlyBraces'
 
-export default ({ rows, anchorRoot = '' }) => (
-  <div className={styles.row}>
-    <Opening />
-    {rows.map((row) => (
-      <div
-        id={(anchorRoot ? anchorRoot + '.' : '') + row.property}
-        className={classnames(styles.content, 'anchorify')}
-      >
+function Header(row) {
+  return (
+    <span
+      className={styles.property}
+      dangerouslySetInnerHTML={{
+        __html: `<code><strong>${row.property}</strong><span>${
+          row.optional ? '?' : ''
+        }: ${row.type}</span></code>`,
+      }}
+    ></span>
+  )
+}
+
+function Content(row) {
+  return (
+    <div>
+      {!row.child && Header(row)}
+      {!row.child && (
         <div
-          className={styles.property}
-          dangerouslySetInnerHTML={{
-            __html: `<code><strong>${row.property}</strong><span>${
-              row.optional ? '?' : ''
-            }: ${row.type}</span></code>`,
-          }}
+          className={styles.description}
+          dangerouslySetInnerHTML={{ __html: row.description }}
         ></div>
-        {!row.child && (
-          <div
-            className={styles.description}
-            dangerouslySetInnerHTML={{ __html: row.description }}
-          ></div>
-        )}
+      )}
 
-        {row.child}
+      {row.child}
+    </div>
+  )
+}
+
+export default ({ rows, anchorRoot = '' }) => {
+  return (
+    <div className={styles.row}>
+      <Opening />
+      
+      <div className={classnames(styles.content)}>
+      {rows.map((row) =>
+        row.child ? (
+          <Collapse header={Header(row)}>
+            {Content(row)}
+          </Collapse>
+        ) : (
+          <div
+            id={(anchorRoot ? anchorRoot + '.' : '') + row.property}
+            className={classnames('anchorify')}
+          >
+            {Content(row)}
+          </div>
+        )
+      )}
       </div>
-    ))}
-    <Closing />
-  </div>
-)
+      <Closing />
+    </div>
+  )
+}

src/theme/Properties/styles.module.css

@@ -28,7 +28,7 @@
 }
 
 .row .description {
-  margin-top: -20px;
+  margin: 0 0 30px;
 }
 
 .description .alert {
@@ -37,5 +37,5 @@
 
 .property code {
   position: relative;
-  top: -11px;
-}
+  top: -12px;
+}