[openstreetmap/openstreetmap-website] Use media queries to hide menus instead of JavaScript (PR #6727)

Tue Jan 20 21:56:00 UTC 2026

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/6727 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260120/675a6f18/attachment-0001.htm>