From 618fc4b2c08b52f04244ad126cb28811ba7212c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 14 Apr 2024 01:59:23 +0200
Subject: [PATCH 1/2] Move responsive menu styles to its proper file

We forgot to do so in commit 49cb6e010.
---
 app/assets/stylesheets/layout.scss                 | 12 ------------
 app/assets/stylesheets/layout/responsive_menu.scss | 13 +++++++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/stylesheets/layout/responsive_menu.scss

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d95e72179..58c3d0de3 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -588,18 +588,6 @@ body > header,
   }
 }
 
-.menu-button {
-  border: 1px solid;
-  border-radius: $button-radius;
-  color: inherit;
-  padding: 0.6em;
-}
-
-.menu-icon {
-  @include hamburger($color: currentcolor, $color-hover: currentcolor);
-  cursor: inherit;
-}
-
 .dropdown.menu > li {
 
   a {
diff --git a/app/assets/stylesheets/layout/responsive_menu.scss b/app/assets/stylesheets/layout/responsive_menu.scss
new file mode 100644
index 000000000..ff8c1f4da
--- /dev/null
+++ b/app/assets/stylesheets/layout/responsive_menu.scss
@@ -0,0 +1,13 @@
+[data-responsive-toggle=responsive_menu] {
+  .menu-button {
+    border: 1px solid;
+    border-radius: $button-radius;
+    color: inherit;
+    padding: 0.6em;
+  }
+
+  .menu-icon {
+    @include hamburger($color: currentcolor, $color-hover: currentcolor);
+    cursor: inherit;
+  }
+}

From 8d7deef41360b1cdf6800775ce0a0977b4beac11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 12 Sep 2022 04:34:36 +0200
Subject: [PATCH 2/2] Don't flash the menu button on desktop screens

The button flashed briefly when loading the page. This was even more
obvious when using devices with slow internet connections.

Using CSS instead of JavaScript to hide the menu solves the issue, since
styles are loaded before scripts.
---
 app/assets/stylesheets/layout/responsive_menu.scss       | 4 ++++
 app/components/layout/responsive_menu_component.html.erb | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/layout/responsive_menu.scss b/app/assets/stylesheets/layout/responsive_menu.scss
index ff8c1f4da..b30eb060a 100644
--- a/app/assets/stylesheets/layout/responsive_menu.scss
+++ b/app/assets/stylesheets/layout/responsive_menu.scss
@@ -1,4 +1,8 @@
 [data-responsive-toggle=responsive_menu] {
+  @include breakpoint(medium) {
+    display: none;
+  }
+
   .menu-button {
     border: 1px solid;
     border-radius: $button-radius;
diff --git a/app/components/layout/responsive_menu_component.html.erb b/app/components/layout/responsive_menu_component.html.erb
index 3a0e6feab..5f0489c05 100644
--- a/app/components/layout/responsive_menu_component.html.erb
+++ b/app/components/layout/responsive_menu_component.html.erb
@@ -1,4 +1,4 @@
-<span data-responsive-toggle="responsive_menu" data-hide-for="medium">
+<span data-responsive-toggle="responsive_menu">
   <button type="button" class="menu-button" data-toggle>
     <span class="menu-icon"></span>
     <%= t("application.menu") %>