Sidenav Component

<div style="height: 400px;">
  <div class="spr-side-drawer-overlay-container spr-side-drawer-overlay-dark-background">
    <div class="spr-side-drawer-wrapper">
      <div class="spr-side-drawer spr-side-drawer-open">
        <div class="spr-side-drawer-header">
          <div><i class="spr-icon spr-icon-close"></i></div>
        </div>
        <div class="spr-sidenav">
          <div class="spr-sidenav-nav-group">
            <div class="spr-accordion-list">
              <div class="spr-accordion">
                <div class="spr-accordion-panel">
                  <div class="spr-accordion-panel-header">
                    <div
                      class="spr-accordion-list-item spr-accordion-list-item-expandable spr-sidenav-selected-list-item">
                      <div class="spr-accordion-list-item-content-text">
                        Canines
                      </div>
                      <div class="spr-accordion-list-item-indicator">
                        <i class="spr-icon spr-icon-carat-up"></i>
                      </div>
                    </div>
                  </div>
                  <div class="spr-accordion-panel-content">
                    <div class="spr-accordion-list-item spr-accordion-list-sub-item">
                      Dogs
                    </div>
                    <div class="spr-accordion-list-item spr-accordion-list-sub-item">
                      Wolves
                    </div>
                    <div class="spr-accordion-list-item spr-accordion-list-sub-item">
                      Maybe Foxes
                    </div>
                  </div>
                </div>
                <div class="spr-accordion-panel">
                  <div class="spr-accordion-panel-header">
                    <div
                      class="spr-accordion-list-item spr-accordion-list-item-expandable">
                      <div class="spr-accordion-list-item-content-text">
                        Felines
                      </div>
                      <div class="spr-accordion-list-item-indicator">
                        <i class="spr-icon spr-icon-carat-down"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="spr-sidenav-nav-group spr-sidenav-footer">
            <div class="spr-accordion-list">
              <div class="spr-accordion">
                <div class="spr-accordion-panel">
                  <div class="spr-accordion-panel-header">
                    <div class="spr-accordion-list-item">
                      <div class="spr-accordion-list-item-content-text">
                        Cat Facts
                      </div>
                    </div>
                  </div>
                </div>
                <div class="spr-accordion-panel">
                  <div class="spr-accordion-panel-header">
                    <div class="spr-accordion-list-item">
                      <div class="spr-accordion-list-item-content-text">
                        Log Out
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@import 'components/sidenav';