Maracuya is Now Responsive

Hamburger menu sliding in

I spent most of yesterday working on a responsive menu for Maracuya. I wanted something that plays nicely with my BEMIT CSS setup. I ended up creating two menus. The first one is the desktop-sized menu, c-menu, which contains a list of c-menu__items. c-menu also contains c-menu__hamburger-button, which is hidden by default.

If the screen width is small enough, all c-menu__items are hidden and the hamburger button is shown. In addition, there is an off-screen <div> that is 100vw. I added an event listener to the hamburger button that does a CSS transition to move the hamburger menu overlay in a position: fixed above our content.

This is all super basic frontend design, but I'm learning quite a lot from implementing very basic things from scratch!