Sidebar

Width Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<aside class="aparte-sidebar">
  <div class="aparte-sidebar__header">
    <span class="aparte-sidebar__brand">aparté</span>
    <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat">
      <aparte-icon name="edit"></aparte-icon>
    </button>
  </div>
  <div class="aparte-sidebar__search aparte-field-group">
    <input class="aparte-field aparte-field--sm" type="search" placeholder="Search" data-aparte-sidebar-search>
  </div>
  <div class="aparte-sidebar__body">
    <aparte-conversation-list></aparte-conversation-list>
  </div>
  <div class="aparte-sidebar__footer">
    <span class="aparte-avatar aparte-avatar--sm">P</span> Paul
  </div>
</aside>

The column beside the chat.

A sized column that becomes a drawer under 48rem of window. The recipe draws the column and its four regions; <aparte-sidebar> adds the behaviour (collapse, the drawer, the search filter) and sets data-drawer on itself from the media query, which is the one attribute the rules below read.

The element wears the same class and adds the behaviour; <aside class="aparte-sidebar"> is the look alone, which is what this page shows.

Classes

.aparte-sidebar · .aparte-sidebar__body · .aparte-sidebar__brand · .aparte-sidebar__footer · .aparte-sidebar__header · .aparte-sidebar__scrim · .aparte-sidebar__search

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.