From e61ff7c039998eff86ced0dadb5bfbda774ff5fe Mon Sep 17 00:00:00 2001
From: Valentin Gagarin <valentin.gagarin@tweag.io>
Date: Thu, 14 Nov 2024 17:42:06 +0100
Subject: [PATCH] show mobile menu toggle in mode-sensitive color

---
 website/presentation/style.css | 30 +++++++++++++++---------------
 website/structure/page.nix     | 10 +++++++++-
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/website/presentation/style.css b/website/presentation/style.css
index b348b56..d486ef6 100644
--- a/website/presentation/style.css
+++ b/website/presentation/style.css
@@ -127,8 +127,10 @@ header > nav > ul > li > details > nav ul li {
   padding: 0.25em 0;
 }
 
-#menu-toggle {
+#menu-toggle,
+#menu-toggle + label {
   display: none;
+  appearance: none;
 }
 
 @media (max-width: 50em) {
@@ -136,14 +138,22 @@ header > nav > ul > li > details > nav ul li {
     display: block;
   }
 
-  #menu-toggle::before {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z'/%3E%3C/svg%3E");
+  #menu-toggle ~ label {
+    position: absolute;
+    right: 1em;
+    top: 0.5em;
+    cursor: pointer;
     display: block;
   }
 
-  #menu-toggle:checked::before {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpolygon points='11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2' transform='rotate(45 10 10)'/%3E%3C/svg%3E");
+  .menu-close,
+  .menu-open {
+    cursor: pointer;
+    fill: var(--text-color);
   }
+  .menu-close { display: none; }
+  #menu-toggle:checked + label .menu-close { display: block; }
+  #menu-toggle:checked + label .menu-open { display: none; }
 
   header > nav {
     margin-bottom: 1em;
@@ -210,14 +220,4 @@ header > nav > ul > li > details > nav ul li {
   header {
     position: relative;
   }
-
-  /* for some reason this must be at the end to work */
-  #menu-toggle {
-    display: block;
-    position: absolute;
-    right: 1em;
-    top: 0.5em;
-    appearance: none;
-    cursor: pointer;
-  }
 }
diff --git a/website/structure/page.nix b/website/structure/page.nix
index a5c64fd..106d491 100644
--- a/website/structure/page.nix
+++ b/website/structure/page.nix
@@ -63,7 +63,15 @@ in
       body.content = [
         ''
           <header>
-            <input type="checkbox" id="menu-toggle">
+            <input type="checkbox" id="menu-toggle" hidden>
+            <label for="menu-toggle" hidden>
+              <svg class="menu-open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
+                <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"/>
+              </svg>
+              <svg class="menu-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
+                <polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2" transform="rotate(45 10 10)"/>
+              </svg>
+            </label>
             ${lib.indent "  " (cfg.menus.main.outputs.html page)}
           </header>
         ''