From d794633ed5d505495d3fac1df4584d1ae9cb15cf Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 24 Jul 2023 08:15:44 +0200
Subject: [PATCH] feat: initial SettingsPopover

---
 src/components/AddressBar.astro      | 10 +++++-----
 src/components/SettingsPopover.astro | 13 +++++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 src/components/SettingsPopover.astro

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index 4b174cd..33126af 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -1,5 +1,6 @@
 ---
 import Icon from 'astro-iconify';
+import SettingsPopover from './SettingsPopover.astro';
 
 export interface Props {
   url: string | null;
@@ -18,9 +19,9 @@ const { url } = Astro.props;
     <button aria-label="Submit" class="btn right-buttons" type="submit" id="submit">
       <Icon name="ri:ai-generate" />
     </button>
-    <button aria-label="Home" class="btn right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
+    <a aria-label="Home" class="btn right-buttons" type="button" id="app-home" href="/" hidden>
       <Icon name="mdi:home" />
-    </button>
+    </a>
     <div aria-label="Settings" class="btn right-buttons">
       <input type="checkbox" id="settings-toggle" hidden>
       <label for="settings-toggle"><Icon name="mdi:cog" /></label>
@@ -28,20 +29,19 @@ const { url } = Astro.props;
   </form>
 </div>
 
+<SettingsPopover toggleId="settings-toggle" />
+
 <script>
   const backLink = document.querySelector<HTMLButtonElement>('#app-back');
-  const homeLink = document.querySelector<HTMLButtonElement>('#app-home');
   const submitBtn = document.querySelector<HTMLButtonElement>('#submit');
   const urlInput = document.querySelector<HTMLInputElement>('#app-url');
 
   // if js is enabled, show the back button and github link
   backLink?.removeAttribute('hidden');
-  homeLink?.removeAttribute('hidden');
 
   if (urlInput?.value === '') {
     backLink?.setAttribute('disabled', 'true');
     submitBtn?.setAttribute('disabled', 'true');
-    homeLink?.setAttribute('disabled', 'true');
   }
 
   urlInput?.addEventListener('input', (e) => {
diff --git a/src/components/SettingsPopover.astro b/src/components/SettingsPopover.astro
new file mode 100644
index 0000000..ef40113
--- /dev/null
+++ b/src/components/SettingsPopover.astro
@@ -0,0 +1,13 @@
+---
+export interface Props {
+  toggleId: string;
+}
+const { toggleId } = Astro.props;
+---
+
+<form hidden>
+  <div class="field">
+    <input type="checkbox" id="settings-1" name="settings-1" checked />
+    <label for="settings-1">Option 1</label>
+  </div>
+</form>