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] 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") %>