34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
|
import { useEffect, useState, type ReactNode } from 'react'
|
||
|
|
import vectorClose from '../../vectors/category-close.svg'
|
||
|
|
import vectorOpen from '../../vectors/category-open.svg'
|
||
|
|
import './styles/SidebarCategory.css'
|
||
|
|
|
||
|
|
interface PropsForSidebarCategory {
|
||
|
|
label: string
|
||
|
|
header?: boolean
|
||
|
|
children?: ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SidebarCategory({ label, header, children }: PropsForSidebarCategory) {
|
||
|
|
const key = `category_closed_${label.toLowerCase()}`
|
||
|
|
const [closed, setClosed] = useState(localStorage.getItem(key) === 'Y')
|
||
|
|
useEffect(() => localStorage.setItem(key, closed ? 'Y' : 'N'), [closed])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`category ${closed ? 'close' : 'open'}`}>
|
||
|
|
{header && (
|
||
|
|
<button className="toggle" onClick={() => setClosed(!closed)}>
|
||
|
|
<span className="label">{label.toUpperCase()}</span>
|
||
|
|
<img
|
||
|
|
className="icon"
|
||
|
|
alt={`Toggle visibility for ${label}`}
|
||
|
|
src={closed ? vectorClose : vectorOpen}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="items">{children}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|