Build drawer menu

[madrilene]

• make drawer menu the default
• adjust the CSS for the drawer menu

[netlify[bot]]

✅ Deploy Preview for unlockopen-com-v4 ready!

Name	Link
🔨 Latest commit	f807958ed35bc1e9f5ada876d900206c73c51281
🔍 Latest deploy log	https://app.netlify.com/sites/unlockopen-com-v4/deploys/6662cdbb3b8f9800083f3f66
😎 Deploy Preview	https://deploy-preview-37--unlockopen-com-v4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[madrilene]

This works, but I'm not yet sure if it's a solid solution

[tobie]

Still the same problem for me on iOS.

[tobie]

The other solution I has seen was this: https://dev.to/tongrhj/the-mistake-developers-make-when-coding-a-hamburger-menu-1deg

[madrilene]

Can you give me your iPhone model / iOS version? I have to check if the :has() pseudo-class is supported, and if that's not the case, use a JS solution instead.

[tobie]

Well, I'd want to make sure it works for the bulk of iOS users, not just me. :) I'm running 17.5.1 on a 14 Pro.

[madrilene]

Sure! That's why I need to investigate this further. To pinpoint the problem to the usage of :has() and in consequence check on the other places where :has() might be used, and the implications if its not supported.

[madrilene]

Tested it with your device on Browserstack - :has() was not the problem, but the overflow-y property. :has() is widely supported now, since version 15.4 for Safari. https://caniuse.com/css-has

Instead I opted for removing the no JS fallback, so users with older Browser versions get a good experience. https://caniuse.com/?search=css-media-scripting

[tobie]

Yeah, I have stopped paying attention to browser support a long while ago. :)

[madrilene]

Shall we merge that?