2.32 #Components.sidepanel Sidepanel

Toggle example guides Toggle HTML markup

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-visible will not work in all browsers In order to disable animations use sb-sidepanel--inanimate (on the panel), sb-container--sidepanel-inanimate (on the main content) and sb-sidepanel__handle--inanimate (on the toggle button)

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Content
Markup 
<div class="kss-modifier__example--sidepanel">
   <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" viewBox="-4 -1.909 16 16">
      <path d="M6.7071 10.3838c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0l-5-5c-.3905-.3905-.3905-1.0237 0-1.4142l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L2.4142 6.091l4.293 4.2928z"/>
     </svg>
   </button>
   <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--secondary sb-btn--block">Button</button>
     </div>
   </aside>
   <main class="sb-container--sidepanel sb-padding" data-kss-animation-switch="sb-container--sidepanel-collapsed" data-kss-animation-name="Main">
      Content
   </main>
</div>
Source: components/_sidepanel.scss, line 3