Drawer

Drawer Below App Bar

<div class="app">
  <div class="app-bar-wrapper">
    <div class="app-bar app-bar--primary">
      <div class="toolbar">
        <div class="toolbar__action">
          <button type="button" class="button button--icon" data-controller="toggle" data-toggle-target="#demo-drawer-below" data-toggle-action="drawer#toggle">
            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
          </button>
        </div>
        <div class="toolbar__title">
          Title
        </div>
      </div>
    </div>
    <div class="drawer-wrapper">
      <nav id="demo-drawer-below" class="drawer" data-controller="drawer">
        <div class="drawer__container">
          <div class="drawer__header">
            <div class="toolbar">
              <div class="toolbar__title">
                Header
              </div>
            </div>
          </div>
          <div class="drawer__body">
            <div class="drawer__menu">
              <a href="#" class="drawer__item">
                Drawer Item
              </a>
              <a href="#" class="drawer__item">
                Drawer Item
              </a>
              <a href="#" class="drawer__item">
                Drawer Item
              </a>
            </div>
          </div>
          <div class="drawer__footer">
            <div class="toolbar">
              <div class="toolbar__title">
                Footer
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div class="main">
        <div class="main__container">
          Main Content
        </div>
      </div>
    </div>
  </div>
</div>

Drawer beside App Bar

<div class="app">
  <div class="drawer-wrapper">
    <nav id="demo-drawer-beside" class="drawer" data-controller="drawer">
      <div class="drawer__container">
        <div class="drawer__header">
          <div class="toolbar">
            <div class="toolbar__title">
              Header
            </div>
          </div>
        </div>
        <div class="drawer__body">
          <div class="drawer__menu">
            <a href="#" class="drawer__item">
              Drawer Item
            </a>
            <a href="#" class="drawer__item">
              Drawer Item
            </a>
            <a href="#" class="drawer__item">
              Drawer Item
            </a>
          </div>
        </div>
        <div class="drawer__footer">
          <div class="toolbar">
            <div class="toolbar__title">
              Footer
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div class="app-bar-wrapper">
      <div class="app-bar app-bar--primary">
        <div class="toolbar">
          <div class="toolbar__action">
            <button type="button" class="button button--icon" data-controller="toggle" data-toggle-target="#demo-drawer-beside" data-toggle-action="drawer#toggle">
              <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
            </button>
          </div>
          <div class="toolbar__title">
            Title
          </div>
        </div>
      </div>
      <div class="main">
        <div class="main__container">
          Main Content
        </div>
      </div>
    </div>
  </div>
</div>