Support touchscreen navigation.

src/includes/nav_header.html

@@ -1,5 +1,5 @@
-<input type="checkbox" id="toggle" />
+<input id="toggle_nav" type="checkbox" />
-<label for="toggle" class="nav_header">
+<label for="toggle_nav" class="nav_header">
     <h2 class="logo">Cutieguwu</h2>
     <ion-icon name="menu-outline"></ion-icon>
 </label>

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>

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);
     }
 }

src/partials/_pane_nav.scss

@@ -41,8 +41,7 @@ nav.pane {
         }
     }
 
-    nav.pane > #toggle:checked {
+    nav.pane > input:checked + label {
-        + .nav_header {
         color: var(--highlight-hover);
 
         + .menu {
@@ -54,4 +53,3 @@ nav.pane {
         }
     }
 }
-}