From 5bc1d2ecd9f16d8c46cd056f488d1d8d7dedb8cc Mon Sep 17 00:00:00 2001
From: Cutieguwu <owen.brooks77@gmail.com>
Date: Thu, 21 Aug 2025 12:32:49 -0400
Subject: [PATCH] Support touchscreen navigation.

---
 src/includes/nav_header.html    |  4 ++--
 src/includes/nav_menu.html      | 15 +++++++++------
 src/partials/_nav_dropdown.scss | 14 +++++++++++---
 src/partials/_pane_nav.scss     | 14 ++++++--------
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/includes/nav_header.html b/src/includes/nav_header.html
index 99f8bcb..995dfea 100644
--- a/src/includes/nav_header.html
+++ b/src/includes/nav_header.html
@@ -1,5 +1,5 @@
-<input type="checkbox" id="toggle" />
-<label for="toggle" class="nav_header">
+<input id="toggle_nav" type="checkbox" />
+<label for="toggle_nav" class="nav_header">
     <h2 class="logo">Cutieguwu</h2>
     <ion-icon name="menu-outline"></ion-icon>
 </label>
diff --git a/src/includes/nav_menu.html b/src/includes/nav_menu.html
index d4eafb4..5e8c8ec 100644
--- a/src/includes/nav_menu.html
+++ b/src/includes/nav_menu.html
@@ -18,10 +18,11 @@
 
     <!-- External Links -->
     <li class="dropdown">
-        <header class="item">
+        <input type="checkbox" id="toggle_ext_links" />
+        <label for="toggle_ext_links" class="item">
             <p class="title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </header>
+        </label>
         <ul>
             <li><a class="title" href="https://github.com/Cutieguwu">Github (Mirror)</a></li>
             <li><a class="title" href="https://www.twitch.tv/cutieguwu">Twitch</a></li>
@@ -33,10 +34,11 @@
 
     <!-- Public Services -->
     <li class="dropdown">
-        <header class="item">
+        <input type="checkbox" id="toggle_srv_pub" />
+        <label for="toggle_srv_pub" class="item">
             <p class="title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </header>
+        </label>
         <ul>
             <li><a class="title" href="https://webcheck.cutieguwu.ca">Web Check</a></li>
         </ul>
@@ -44,10 +46,11 @@
 
     <!-- Services -->
     <li class="dropdown">
-        <header class="item">
+        <input type="checkbox" id="toggle_srv_priv" />
+        <label for="toggle_srv_priv" class="item">
             <p class="title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </header>
+        </label>
         <ul>
             <li><a class="title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a></li>
         </ul>
diff --git a/src/partials/_nav_dropdown.scss b/src/partials/_nav_dropdown.scss
index 8ae449c..9221280 100644
--- a/src/partials/_nav_dropdown.scss
+++ b/src/partials/_nav_dropdown.scss
@@ -1,5 +1,5 @@
 .dropdown {
-    > header {
+    > label.item {
         display: grid;
         grid-template-columns: 1fr min-content;
         align-items: center;
@@ -20,10 +20,18 @@
         padding: 0 var(--spacing-small);
         list-style: none;
     }
+
+    > input:checked + label {
+        color: var(--highlight-hover);
+
+        + ul {
+            display: grid;
+        }
+    }
 }
 
 .dropdown:hover {
-    > header {
+    > label.item {
         transform: var(--transform-scale-x);
 
         > ion-icon {
@@ -38,7 +46,7 @@
 }
 
 @media only screen and (max-width: 500px) {
-    .dropdown > header > ion-icon {
+    .dropdown > label.item > ion-icon {
         margin-right: var(--padding-mobile);
     }
 }
diff --git a/src/partials/_pane_nav.scss b/src/partials/_pane_nav.scss
index d6d0ab5..7ce76f5 100644
--- a/src/partials/_pane_nav.scss
+++ b/src/partials/_pane_nav.scss
@@ -41,16 +41,14 @@ nav.pane {
         }
     }
 
-    nav.pane > #toggle:checked {
-        + .nav_header {
-            color: var(--highlight-hover);
+    nav.pane > input:checked + label {
+        color: var(--highlight-hover);
 
-            + .menu {
-                display: grid;
+        + .menu {
+            display: grid;
 
-                + .location + .quick_links {
-                    display: flex;
-                }
+            + .location + .quick_links {
+                display: flex;
             }
         }
     }