59 lines
1.2 KiB
Text
59 lines
1.2 KiB
Text
---
|
|
import Icon from "astro-iconify";
|
|
export interface Props {
|
|
toggle: string;
|
|
}
|
|
|
|
const { toggle } = Astro.props;
|
|
---
|
|
|
|
<form id="settings-form" hidden>
|
|
<h2>Settings</h2>
|
|
<label for={toggle}>
|
|
<Icon name="mdi:close" />
|
|
</label>
|
|
<div class="field">
|
|
<input type="checkbox" id="settings-1" name="settings-1" checked />
|
|
<label for="settings-1">Option 1</label>
|
|
</div>
|
|
</form>
|
|
|
|
<style lang="scss">
|
|
#settings-form {
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
padding: 1em;
|
|
width: 300px;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.1em;
|
|
box-shadow: 0 1px 3px 1px #eee;
|
|
|
|
h2 {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</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>
|