fix: hamburger menu styling on smaller screens (#671)

"Someone" broke the hamburger menu in #646.

This fixes the issue and cleans things up by making the CSS a bit more
direct:
* I use
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state
to modify the `nav` directly.
* I add IDs to the hamburger and X components, and then use
https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants
to directly target them, in combination with peer.

FYI @hashrock since this restores the great work you did in #374.

components/Header.tsx

@@ -21,10 +21,10 @@ export default function Header(props: HeaderProps) {
       <input
         type="checkbox"
         id="nav-toggle"
-        class="hidden [:checked&+*>:last-child>*>:first-child]:hidden [:checked&+*>:last-child>*>:last-child]:block checked:siblings:last-child:flex"
+        class="hidden peer"
       />
 
-      <div class="flex justify-between items-center">
+      <div class="flex justify-between items-center peer-checked:[&_>div>label>#IconMenu]:hidden peer-checked:[&_>div>label>#IconX]:block">
         <a href="/" class="shrink-0">
           <img
             height="48"
@@ -41,8 +41,8 @@ export default function Header(props: HeaderProps) {
             id="nav-toggle-label"
             htmlFor="nav-toggle"
           >
-            <IconMenu class="size-6" />
-            <IconX class="hidden size-6" />
+            <IconMenu class="size-6" id="IconMenu" />
+            <IconX class="hidden size-6" id="IconX" />
           </label>
         </div>
       </div>
@@ -58,7 +58,7 @@ export default function Header(props: HeaderProps) {
         `}
       </script>
       <nav
-        class={"hidden flex-col gap-x-4 divide-y divide-solid sm:flex sm:items-center sm:flex-row sm:divide-y-0"}
+        class={"hidden flex-col gap-x-4 divide-y divide-solid sm:flex sm:items-center sm:flex-row sm:divide-y-0 peer-checked:flex"}
       >
         <a
           href="/dashboard"