Changes drawer navigation from drawer to accordion #477
Conversation
- Updates some `.c-drawer` styles
- Updates `$('.c-primary-nav__arrow').on(click)` event
- Removes placeholder `c-drawer__subnav` from `drawer-navigation.twig`
| @@ -14,7 +14,6 @@ | |||
| <div class="c-drawer__nav"> | |||
| <div class="c-drawer__nav-primary"> | |||
| {% include '@molecules/navigation/primary-navigation.twig' %} | |||
| <ul class="c-drawer__subnav u-theme--background-color--darker"></ul> | |||
There was a problem hiding this comment.
@eduludi Is it possible to add a class or CSS change that would make this not necessary to remove? Since we have to coordinate with the update of the Wordpress theme, it would be helpful to be able to leave this line in for at least the next month or so to provide some overlap without messing up the existing installations.
There was a problem hiding this comment.
It wasn't necessary to remove but, as the JS part to make it useful is not longer there, I just did it.
Now I rolled back that change and only two files (CSS and JS) are being modified by this PR.
There was a problem hiding this comment.
The problem I'm seeing is that if you don't remove it, the menu is still unusable on the phone, as it slides out a blank drawer... like before, but with nothing in it. Not sure if that can be hidden?
|
This is still in need of some work, as the video shows, the overlays are still visible with the most recent code. |
|
When the menu opens, the indicator needs to be flipped over. |
- It was being triggered in small resolutions after resizing from a larger one - This caused expand arrows to point in the wrong direction
This was caused by some CSS selector related to We can remove related CSS in a future version, as it still may be used by some implementations consuming the
I was only able to replicate this when resized the browser from a |
This replaces the "sub-drawer" behaviour from drawer menu on mobile, with an accordion-like menu.
.c-drawerstyles:$('.c-primary-nav__arrow').on(click)eventc-drawer__subnavfromdrawer-navigation.twig(only used to hold the cloned menu item)