|
1 | 1 | import type { DifferOptions } from "json-diff-kit"; |
2 | 2 |
|
3 | 3 | import "./Sidebar.css"; |
| 4 | +import { useState } from "react"; |
| 5 | + |
4 | 6 | import type { Config } from "../types"; |
5 | 7 |
|
6 | 8 | type Props = { config: Config; updateConfig: (key: keyof Config, value: Config[keyof Config]) => void }; |
7 | 9 |
|
8 | 10 | function Sidebar(props: Props) { |
9 | 11 | const { config, updateConfig } = props; |
| 12 | + const [showSidebar, setShowSidebar] = useState(true); |
| 13 | + |
| 14 | + if (!showSidebar) { |
| 15 | + return ( |
| 16 | + <div className="sidebar-collapsed" onClick={() => setShowSidebar(true)} title="Show Configuration Sidebar"> |
| 17 | + ☰ |
| 18 | + </div> |
| 19 | + ); |
| 20 | + } |
10 | 21 | return ( |
11 | 22 | <aside className="sidebar"> |
12 | 23 | <div className="config-section"> |
13 | 24 | <h2 className="section-title">Main Configuration</h2> |
14 | 25 |
|
| 26 | + <div className="sidebar-collapse" onClick={() => setShowSidebar(false)} title="Hide Sidebar"> |
| 27 | + ☰ |
| 28 | + </div> |
15 | 29 | <div className="form-group"> |
16 | 30 | <label className="form-label"> |
17 | 31 | Left Title |
|
0 commit comments