From 8bcff3268f4fd5ce670e49f74096e70390ea6625 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 25 Jul 2023 22:47:53 +0200
Subject: [PATCH] feat: temporary js solution for close/open

---
 src/components/AddressBar.astro      |  6 ------
 src/components/SettingsPopover.astro | 22 ++++++++++++++++++++--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index ab1cc90..f0a6de1 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -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">
diff --git a/src/components/SettingsPopover.astro b/src/components/SettingsPopover.astro
index c6ea8f4..73c3b40 100644
--- a/src/components/SettingsPopover.astro
+++ b/src/components/SettingsPopover.astro
@@ -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>