feat: temporary js solution for close/open

This commit is contained in:
Ayo 2023-07-25 22:47:53 +02:00 committed by Ayo Ayco
parent 8339b2b4ea
commit 8bcff3268f
2 changed files with 20 additions and 8 deletions

View file

@ -78,12 +78,6 @@ const { url } = Astro.props;
submitBtn?.removeAttribute("disabled");
}
});
document
.getElementById("settings-toggle")
?.addEventListener("change", (e) =>
console.log(e.currentTarget?.["checked"])
);
</script>
<style lang="scss">

View file

@ -7,7 +7,8 @@ export interface Props {
const { toggle } = Astro.props;
---
<form id="settings-form">
<form id="settings-form" hidden>
<h2>Settings</h2>
<label for={toggle}>
<Icon name="mdi:close" />
</label>
@ -26,9 +27,13 @@ const { toggle } = Astro.props;
width: 300px;
position: absolute;
top: 0.5em;
right: 0.5em;
right: 0.1em;
box-shadow: 0 1px 3px 1px #eee;
h2 {
margin: 0.5em 0;
}
svg {
width: 24px;
height: 24px;
@ -39,3 +44,16 @@ const { toggle } = Astro.props;
}
}
</style>
<script>
/**
* temporary JS solution, should be replaced with CSS
*/
document
.getElementById("settings-toggle")
?.addEventListener("change", (e) => {
if (e.currentTarget?.["checked"])
document.getElementById("settings-form")?.removeAttribute("hidden");
else document.getElementById("settings-form")?.setAttribute("hidden", "");
});
</script>