Drawer

Standard

Side appbar

<div class="app">
  <div class="drawer-wrapper">
    <nav id="demo-drawer-permanent" class="drawer" data-controller="drawer">
      <div class="drawer__container">
        <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>
    </nav>
    <div class="drawer-wrapper__content">
      <div class="app-bar-wrapper">
        <div class="app-bar app-bar--primary">
          <div class="toolbar">
            <div class="toolbar__title">
              Title
            </div>
          </div>
        </div>
        <div class="app-bar-wrapper__content">
          <div class="padding">
            Main Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Under appbar

<div class="app">
  <div class="app-bar-wrapper">
    <div class="app-bar app-bar--primary">
      <div class="toolbar">
        <div class="toolbar__title">
          Title
        </div>
      </div>
    </div>
    <div class="app-bar-wrapper__content">
      <div class="drawer-wrapper">
        <nav id="demo-drawer-permanent" class="drawer" data-controller="drawer">
          <div class="drawer__container">
            <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>
        </nav>
        <div class="drawer-wrapper__content">
          <div class="padding">
            Main Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Dismissible

<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-dismissible" 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="app-bar-wrapper__content">
      <div class="drawer-wrapper">
        <nav id="demo-drawer-dismissible" class="drawer drawer--dismissible" 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="drawer-wrapper__content">
          <div class="app-content">
            <div class="padding">
              Main Content
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Modal

<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-modal" 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="app-bar-wrapper__content">
      <div class="drawer-wrapper">
        <nav id="demo-drawer-modal" class="drawer drawer--modal" data-controller="drawer">
          <div class="drawer__container">
            <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__scrim" data-action="click->drawer#close"></div>
        </nav>
        <div class="drawer-wrapper__content">
          <div class="app-content">
            <div class="main__container">
              Main Content
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>