Merge pull request #5 from xm0onh/fees

Fees and Rewards - Merge

.gitignore

@@ -20,4 +20,5 @@ yarn-debug.log*
 yarn-error.log*
 
 *.env
+
 venv

docs/glossary.md

@@ -1,7 +1,7 @@
 ---
 title: Glossary
-sidebar_position: 5
-description: Collection of terms and definitions used within the subspace network.
+sidebar_position: 6
+description: Collection of terms and definitions used within the network.
 keywords:
     - glossary
     - terminology

src/components/Collapsible/Collapsible.css

@@ -23,18 +23,19 @@
     outline-offset: 2px;
   }
 
-  .collapsible-content {
-    max-height: 0;
+  .collapsible .collapsible-content {
     overflow: hidden;
-    transition: max-height 0.5s ease-in-out;
-    background: var(--ifm-background-color); 
-    border-top: none;
-    padding: 0 1rem; 
-  }
-
-  .collapsible-content.open {
-    max-height: 500px; 
-    padding-top: 0.5rem; 
-    padding-bottom: 1rem; 
-  }
+    background: var(--ifm-background-color);
+    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+    padding: 0;
+    margin: 0; 
+    display: none; 
+}
+
+.collapsible .collapsible-content.open {
+    display: block; 
+    padding: 0.5rem 1rem; 
+    max-height: auto; 
+}
+
 

src/components/Collapsible/Collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import './Collapsible.css';
 
 export interface CollapsibleProps {
@@ -8,28 +8,16 @@ export interface CollapsibleProps {
 
 const Collapsible: React.FC<CollapsibleProps> = ({ title, children }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const contentRef = useRef<HTMLDivElement>(null);
-    const [maxHeight, setMaxHeight] = useState<string>('0px');
-
-    useEffect(() => {
-        if (isOpen && contentRef.current) {
-            setMaxHeight(`${contentRef.current.scrollHeight}px`);
-        } else {
-            setMaxHeight('0px');
-        }
-    }, [isOpen]);
 
     return (
         <div className="collapsible">
             <button className="collapsible-toggle" onClick={() => setIsOpen(!isOpen)}>
                 {isOpen ? '▼' : '►'} {title}
             </button>
             <div
-                className="collapsible-content"
-                ref={contentRef}
-                style={{ maxHeight: maxHeight }}
+                className={`collapsible-content ${isOpen ? 'open' : ''}`}
             >
-                {children}
+                {isOpen && children} 
             </div>
         </div>
     );