Implement responsive mobile menu + remove old select-based mobile menu

mpetrovich / stylemark

Generate interactive style guides from Markdown.

MIT License

218 stars 35 forks source link

Implement responsive mobile menu + remove old select-based mobile menu #63

Closed jussikinnula closed 4 years ago

jussikinnula commented 5 years ago

Fixes https://github.com/nextbigsoundinc/stylemark/issues/62

I'm open for any additional changes, we use this implementation on current customer project I'm working on. Works very well on latest iPhone and Android.

mpetrovich commented 5 years ago

Great idea!

We're in the midst of completely rewriting the markup and will definitely incorporate this approach. One concern is the JS-based sizing of the navigation pane: it's a little brittle and could perhaps be achieved in CSS.

jussikinnula commented 5 years ago

The reason of the JS-based sizing is that I didn’t want go change the normal version in same commit. So this change only adds responsiveness and removes the old select-based menu.

With some refactoring of the whole menu and use of flexbox it could be possible to remove the JS bits.

jussikinnula commented 5 years ago

Also, we have been using the JS-based approach and tested with variety of devices. The JS-parts only run on mobile, and it’s pretty standard way to do fixed scrollable menus (allthough it’s ”legacy way”, due to nowadays flexbox and vw/vh units being available).