adriano/formex-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Improve rendering of TOC panel

Browse Source
This commit is contained in:
Adrian Rumpold
2025-05-20 12:08:14 +02:00
parent debaf567ea
commit 58bd1160c1
2 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/TOC/TOC.module.css
View File

@@ -1,16 +1,15 @@
.toc { .toc {
font-size: 0.8rem; font-size: 0.8rem;
min-width: 25vw; flex: 1 0 25vw;
flex: 1 auto;
&.hidden { &.hidden {
flex: 0 0; display: none;
min-width: 0;
} }
transition: flex-basis 0.1s ease-in-out;
overflow-y: scroll; overflow-y: scroll;
overflow-x: wrap; overflow-x: wrap;
height: 100vh;
.tocDivision { .tocDivision {
margin-block: 0.5rem; margin-block: 0.5rem;

4
frontend/src/components/TOC/TOC.tsx
View File

@@ -55,15 +55,17 @@ function TOC({ toc }: TOCProps) {
const [isVisible, setIsVisible] = useState(true); const [isVisible, setIsVisible] = useState(true);
return ( return (
<nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}> <>
<button <button
onClick={() => setIsVisible(!isVisible)} onClick={() => setIsVisible(!isVisible)}
className={styles.toggleButton} className={styles.toggleButton}
> >
{isVisible ? "<" : ">"} {isVisible ? "<" : ">"}
</button> </button>
<nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
{toc.map((division) => renderDivision(division))} {toc.map((division) => renderDivision(division))}
</nav> </nav>
</>
); );
} }
export default TOC; export default TOC;