consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't flash the menu button on desktop screens

Browse Source 
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.
This commit is contained in:
Javi Martín
2022-09-12 04:34:36 +02:00
parent 618fc4b2c0
commit 8d7deef413
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/layout/responsive_menu.scss
View File

@@ -1,4 +1,8 @@
[data-responsive-toggle=responsive_menu] { [data-responsive-toggle=responsive_menu] {
@include breakpoint(medium) {
display: none;
}
.menu-button { .menu-button {
border: 1px solid; border: 1px solid;
border-radius: $button-radius; border-radius: $button-radius;

2
app/components/layout/responsive_menu_component.html.erb
View File

@@ -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> <button type="button" class="menu-button" data-toggle>
<span class="menu-icon"></span> <span class="menu-icon"></span>
<%= t("application.menu") %> <%= t("application.menu") %>