From 1a368716168f43ac47e2567063e4c91706476318 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 25 Jul 2023 23:04:21 +0200
Subject: [PATCH] feat: hide buttons if js disabled

---
 src/components/AddressBar.astro | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index f0a6de1..3bb20d2 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -19,7 +19,6 @@ const { url } = Astro.props;
       id="app-back"
       name="app-back"
       onclick="history.go(-1); return false;"
-      hidden
     >
       <Icon name="ic:round-arrow-back-ios" />
     </button>
@@ -45,11 +44,10 @@ const { url } = Astro.props;
       type="button"
       id="app-home"
       href="/"
-      hidden
     >
       <Icon name="mdi:home" />
     </a>
-    <div aria-label="Settings" class="btn right-buttons">
+    <div aria-label="Settings" id="app-settings" class="btn right-buttons">
       <input type="checkbox" id="settings-toggle" hidden />
       <label for="settings-toggle"><Icon name="mdi:cog" /></label>
     </div>
@@ -61,9 +59,11 @@ const { url } = Astro.props;
   const backLink = document.querySelector<HTMLButtonElement>("#app-back");
   const submitBtn = document.querySelector<HTMLButtonElement>("#submit");
   const urlInput = document.querySelector<HTMLInputElement>("#app-url");
+  const settings = document.querySelector<HTMLDivElement>("#app-settings");
 
-  // if js is enabled, show the back button and github link
-  backLink?.removeAttribute("hidden");
+  // if js is enabled, show the back and settings button
+  backLink?.setAttribute("style", "display: block");
+  settings?.setAttribute("style", "display: block");
 
   if (urlInput?.value === "") {
     backLink?.setAttribute("disabled", "true");
@@ -107,6 +107,11 @@ const { url } = Astro.props;
       color: #555;
     }
 
+    #app-back,
+    #app-settings {
+      display: none;
+    }
+
     .btn {
       display: block;
       border: 0px;