From 2637b987a3ba17d18257132f7cfe7121b8dbac33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.coop>
Date: Tue, 15 Jul 2025 20:32:22 -0400
Subject: [PATCH] Use hamburger menu for tablet as well, and hide drawer
 completely when closed

Ref #114 #126
---
 web/themes/custom/geofresco/src/global/_layout.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss
index 7d2885e..844b28f 100644
--- a/web/themes/custom/geofresco/src/global/_layout.scss
+++ b/web/themes/custom/geofresco/src/global/_layout.scss
@@ -64,7 +64,7 @@
 }
 
 // Main navigation, goes to code in page.html.twig
-@include mixins.mobile {
+@include mixins.touch {
   // Code adapted from https://unused-css.com/blog/css-only-hamburger-menu/
   .hamburger-container {
     transition: transform 0.5s ease;
@@ -91,13 +91,13 @@
   }
 
   // Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer.
-  .hamburger-container .drawer a {
+  .hamburger-container .drawer {
     visibility: hidden;
     transition: visibility 0.5s linear;
   }
 
   // Make the focusable elements in the drawer visible when it is open.
-  .hamburger-container .checkbox:checked ~ .drawer a {
+  .hamburger-container .checkbox:checked ~ .drawer {
     visibility: visible;
   }
 
@@ -168,14 +168,14 @@
   }
 }
 
-@include mixins.tablet {
+@include mixins.desktop {
   .hamburger, #hamburger-toggle {
     display: none;
   }
 }
 
 // Make the drawer full-width on mobile
-@media screen and (max-width: local.$mini) {
+@include mixins.mobile {
   .drawer {
     width: 100%;
   }