const closable = document.querySelectorAll("details.closable");

closable.forEach((detail) => {
	detail.addEventListener("toggle", () => {
		if (detail.open) setTargetDetail(detail);
	});
});

function setTargetDetail(targetDetail) {
	closable.forEach((detail) => {
		if (detail !== targetDetail) {
			detail.open = false;
		}
	});
}

document.addEventListener("click", function (event) {
	const isClickInsideDetail = [...closable].some((detail) =>
		detail.contains(event.target)
	);

	if (!isClickInsideDetail) {
		closable.forEach((detail) => {
			detail.open = false;
		});
	}
});

const toggleNavbar = document.getElementById("toggle-navbar");
const siteNavbar = document.getElementById("site-navbar");
const mainContent = document.getElementById("main-content");

toggleNavbar.addEventListener("change", () => {
	if (toggleNavbar.checked) {
		toggleSidebar.checked = false;
	}
});

mainContent.addEventListener("click", () => {
	if (toggleNavbar.checked) toggleNavbar.checked = false;
});