From 659896f57df85533cce7e28816cc6e96b57df0ca Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Wed, 24 Jul 2024 20:37:12 +0800
Subject: [PATCH] Use CSS @supports rule to change property values if popover
 is supported

---
 src/_includes/global/navbar.njk | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index 170a9e4f..4a1942fe 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -54,11 +54,10 @@
     .navbar__menu a:focus { outline-offset: 0.2em; }
 
     .navbar__links {
-        display: none;
+        display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
         gap: 0.5em;
-
     }
 
     .navbar__toggle {
@@ -68,7 +67,7 @@
         padding: 0;
         font-size: 1.25rem;
         font-weight: 700;
-        display: flex;
+        display: none;
         align-items: center;
         gap: 0.3em;
     }
@@ -92,22 +91,15 @@
         opacity: 0.5;
     }
 
+    @supports selector([popover]) {
+        .navbar__toggle { display: flex; }
+        .navbar__links { display: none; }
+    }
+
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .navbar { padding: 1em 0.6em; }
         .navbar__toggle, .navbar__popover { display: none; }
         .navbar__links { display: flex; }
     }
-{% 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
+{% endcss %}
\ No newline at end of file