Implemented an accessible, responsive side navigation. The navigation doesn't yet use true <LinkTo's as there are no routes made yet for the page content. That will have to happen in a follow-up PR. For now though, we do pull in the real pages (currently, just "Button") and list it in the nav.
Adjusted a bunch of focus styling
The side nav is always shown on anything larger than mobile
The side nav responsively switches to a toggleable nav offscreen nav based on breakpoints it listens to live
The side nav can be closed by clicking the space outside, hitting Escape, or activating the toggle button
There's a focus trap for the side nav, which also automatically resets focus to the previous element before the nav was opened
I've been bad and didn't write my tests yet, I got so caught up in other things and work has been busy. I'll try to get to it, but if others want to lend a hand feel free.
Implemented an accessible, responsive side navigation. The navigation doesn't yet use true
<LinkTo
's as there are no routes made yet for the page content. That will have to happen in a follow-up PR. For now though, we do pull in the real pages (currently, just "Button") and list it in the nav.I've been bad and didn't write my tests yet, I got so caught up in other things and work has been busy. I'll try to get to it, but if others want to lend a hand feel free.
Side Nav (Responsive)
https://user-images.githubusercontent.com/1664093/106807348-a94f3000-662e-11eb-8b6d-8da15fb14076.mp4
Focus Styling
https://user-images.githubusercontent.com/1664093/106807609-f29f7f80-662e-11eb-98bc-e84a2395b141.mp4