ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: temporary js solution for close/open

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/AddressBar.astro
View file

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

22
src/components/SettingsPopover.astro
View file

@ -7,7 +7,8 @@ export interface Props {
const { toggle } = Astro.props; const { toggle } = Astro.props;
--- ---
<form id="settings-form"> <form id="settings-form" hidden>
<h2>Settings</h2>
<label for={toggle}> <label for={toggle}>
<Icon name="mdi:close" /> <Icon name="mdi:close" />
</label> </label>
@ -26,9 +27,13 @@ const { toggle } = Astro.props;
width: 300px; width: 300px;
position: absolute; position: absolute;
top: 0.5em; top: 0.5em;
right: 0.5em; right: 0.1em;
box-shadow: 0 1px 3px 1px #eee; box-shadow: 0 1px 3px 1px #eee;
h2 {
margin: 0.5em 0;
}
svg { svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -39,3 +44,16 @@ const { toggle } = Astro.props;
} }
} }
</style> </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>