Sidebar.js

import React from "react"

function NoteSidebar({ state, setEditorState, ...props }) {
	const isActiveID = id => ({
		color:      id === state.activeID ? "hsl(var(--blue-a200))" : null,
		fontWeight: id === state.activeID ? "600" : null
	})
	return (
		<aside className="m-b:-1">
			<div className="m-b:1" style={{ marginTop: -1 * (16 + 18 * 1.5) }}>
				<h1 className="fw:700 fs:1.1 lh:1.4 c:black">
					{state.title || (
						"Untitled"
					)}
				</h1>
			</div>
			{state.tableOfContents && (
				<ul className="m-b:1">
					{state.tableOfContents.map(({ h1, id, h2 }, index) => (
						<li key={index} className="m-y:0.2">
							<p className="fw:600 lh:1.4 c:gray-900" style={isActiveID(id)}>
								{h1}
							</p>
							{h2 && (
								<ul className="m-b:1">
									{h2.map(({ h2, id }, index) => (
										<li key={index} className="m-y:0.2">
											<p className="fw:500 lh:1.4 c:gray" style={isActiveID(id)}>
												{h2}
											</p>
										</li>
									))}
								</ul>
							)}
						</li>
					))}
				</ul>
			)}
		</aside>
	)
}

export default NoteSidebar