Varya: Add mobile navigation treatment (Alternate)

[kjellr]

This PR is identical to #50, except for a couple things:

• It uses some really simple JavaScript to operate the menu on mobile.
• Thanks to that JavaScript approach, the body doesn't scroll underneath the menu anymore.
• The CSS is a little cleaner and easier to understand.
• It doesn't touch the icons — I'd rather wait and add those in once Update Varya Icons #52 lands.

The menu on desktop should look 100% the same when compared to master.

Screenshot:

[kjellr]

I haven't yet tested with WooCommerce — I think I'll need to add a little extra styling to get that working too.

[jffng]

Looks and behaves as expected!

[jffng]

This might be overkill, but I think this will cause a TypeError if for some reason the page loads without an element of id toggle-menu.

We could do something like:

document.getElementById( "toggle-menu" ) ? 
document.getElementById( "toggle-menu" ).onclick = function() { ... } : null; 

[allancole]

Alternatively or maybe in addition to this, we should add a conditional here that only enqueues this script when the menu-1 location is actually active. That way, we only enqueue this script when its needed which will ensure that the #toggle-menu ID will be available in the dom.

[allancole]

Getting a bit of a regression here compared to #50. Seems related to the WC button/cart and maybe some conflicting selectors and/or styles?

#50	This PR

Also, wondering if we can improve the JS function to use scoping and relative variables so we can make it one function and use it for both the main menu UI and the WC menu UI. Happy to take a stab at it if you need :-)

[kjellr]

Getting a bit of a regression here compared to #50. Seems related to the WC button/cart and maybe some conflicting selectors and/or styles?

Yeah, I stripped out the WC-related :not selector in this one, figuring it'd be better to just get the main menu working nicely and then build WC support on top of that.

Also, wondering if we can improve the JS function to use scoping and relative variables so we can make it one function and use it for both the main menu UI and the WC menu UI. Happy to take a stab at it if you need :-)

Definitely — the JS there is really basic, and it'd make sense to use it in both places. Please feel free to pick this up and build that in!

[allancole]

@kjellr added some improvements to optimize the JS and unify this solution so it works for both the main menu and the Woo menu together without scoping conflicts.

Both Menus	Main Menu only	No Menu
Could use a little design direction here. Feels a bit awkward when you click the Menu button and the Close button jumps.	Default menu behavior (sans Woo).	Neither the menu or the script is loaded when the menu is not active or when the menu is empty.

Note: I went ahead and updated the SVG icons to work with #52 so when it’s merged the close and menu icons should appear as expected.

[kjellr]

Awesome, this works well.

Could use a little design direction here. Feels a bit awkward when you click the Menu button and the Close button jumps.

Let's just move the Woo cart over to the left:

Once that's all set, I think this is good to go. I want to make sure the desktop menu items are center-aligned (currently they're actually left-aligned), but I can take care of that in follow-up PR. 👍

Thanks!

[allancole]

Simple but elegant solution!