feat: temporary js solution for close/open
This commit is contained in:
parent
8339b2b4ea
commit
8bcff3268f
2 changed files with 20 additions and 8 deletions
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue