From e76ac1778b2c1efed12ddeb819abfb511155376a Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Wed, 24 Jul 2024 20:10:18 +0800
Subject: [PATCH] Add fallback for older browsers that do not support HTML
 popover

---
 src/_includes/global/navbar.njk | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index bb9baaa9..170a9e4f 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -52,7 +52,14 @@
 
     .navbar__menu a:hover { color: var(--clr-link-hover); }
     .navbar__menu a:focus { outline-offset: 0.2em; }
-    .navbar__links { display: none; }
+
+    .navbar__links {
+        display: none;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        gap: 0.5em;
+
+    }
 
     .navbar__toggle {
         background-color: inherit;
@@ -89,12 +96,18 @@
     @media only screen and (min-width: 43.75rem) {
         .navbar { padding: 1em 0.6em; }
         .navbar__toggle, .navbar__popover { display: none; }
-
-        .navbar__links {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-evenly;
-            gap: 0.5em;
-        }
+        .navbar__links { display: flex; }
     }
-{% endcss %}
\ No newline at end of file
+{% endcss %}
+
+{%- js %}
+function supportsPopover() {
+    return HTMLElement.prototype.hasOwnProperty("popover");
+}
+const popoverSupported = supportsPopover();
+
+if (!popoverSupported) {
+    document.querySelector(".navbar__toggle").style.display = "none";
+    document.querySelector(".navbar__links").style.display = "flex";
+}
+{% endjs %}
\ No newline at end of file