2.26 #Components.sidepanel Sidepanel
This sidepanel is used throughout UBNext. Note that there is no wrapper because:
1) We cannot create a new stacking context because the content has to animate below the main navigation and the button above it
2) If we have a wrapper, we need to animate it the exact same way as the content so that click events in the app can still be captured and the design is
not cut off, which means using transform, which means creating a new stacking context. Fun!
This means that in order to collapse the sidepanel, you need to add sb-sidepanel--collapsed to the aside, and sb-sidepanel__handle--collapsed to the handle.
In order to also animate your application correctly, use sb-container---sidepanel and sb-container--sidepanel-collapsed.
:focus-visiblewill not work in all browsers
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Markup
<aside class="sb-sidepanel" role="menu" aria-expanded="true" data-kss-animation-switch="sb-sidepanel--collapsed" data-kss-animation-name="Aside">
<div class="sb-sidepanel__content">
<button class="sb-btn sb-btn--primary sb-btn--block">Button</button>
</div>
</aside>
<button class="sb-sidepanel__handle" data-kss-animation-switch="sb-sidepanel__handle--collapsed" data-kss-animation-name="Button">
<svg class="sb-icon sb-icon--s sb-icon--arrow" viewBox="0 0 10 10">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="2">
<path stroke-linejoin="round" d="M5 1L1 5l4 4"/>
<path d="M2 5h7"/>
</g>
</svg>
</button>