fixes #6523

### Description

Currently, on mobile devices, you can see unopened menu items and banners 
within a few milliseconds.

https://github.com/user-attachments/assets/6522c80f-b557-4f43-8610-6966fe36a420

This is because the style that hides them is applied using JavaScript by 
setting the `small-nav` class to `<body>`. In the code, it looks like:

https://github.com/openstreetmap/openstreetmap-website/blob/5b3210c5f637596ed65e75c2173990055b11fe5c/app/assets/javascripts/application.js#L115-L119

This can be replaced with a media query that will be applied without waiting 
for JavaScript to be applied.

However, now you only need to fill in the `secondaryMenuItems` array if the 
screen size is mobile. Otherwise, the width of the menu items will always 
remain 0. This is important if you had a narrow window when loading the site, 
but then you expanded it.

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/6727

-- Commit Summary --

  * Use media queries to hide menus instead of JavaScript

-- File Changes --

    M app/assets/javascripts/application.js (17)
    M app/assets/stylesheets/common.scss (2)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/6727.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6727.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6727
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/[email protected]>
_______________________________________________
rails-dev mailing list
[email protected]
https://lists.openstreetmap.org/listinfo/rails-dev

Reply via email to