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';

@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-sidenav {
  background-color: #18191b;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
}

.spr-sidenav .spr-icon {
  /* override the color and of the icons
      that are children of the sidenav */
  background-color: #f7f7f8 !important;
}

.spr-sidenav .spr-accordion-list-item {
  /* This is a modified squish where we have slightly less right
      padding to accommodate for the optional indicator arrows */
  padding: 0.75rem 1.5rem;
  padding-right: 1.5rem;
  color: #fff;
  text-decoration: none;
  /* override the background color and text color of list items
      that are children of the sidenav */
  background-color: #18191b;
  color: #f7f7f8 !important;
  /* Convenience for resetting default link styles, since these will
      likely be included in the nav, either as the direct item or
      nested under */
}

.spr-sidenav .spr-accordion-list-item, .spr-sidenav .spr-accordion-list-item.spr-accordion-list-item-expandable {
  font-weight: 600;
}

.spr-sidenav .spr-accordion-list-item.spr-accordion-list-sub-item {
  padding-left: 2.25rem;
  font-weight: 400;
}

.spr-sidenav .spr-accordion-list-item.a,
.spr-sidenav .spr-accordion-list-item a {
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

.spr-sidenav .spr-accordion-list-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.spr-sidenav .spr-accordion-list-item:active {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

.spr-sidenav .spr-sidenav-nav-group {
  /* override the background color of nav groups
      for future integration of light vs dark mode */
  background-color: #18191b !important;
  flex: 1;
}

.spr-sidenav .spr-sidenav-footer {
  border-top: #6b6f7b solid 1px;
  flex: 0;
}

.spr-sidenav .spr-sidenav-selected-list-item {
  box-shadow: inset 0.25rem 0 0 0 #67d683;
  transition-property: box-shadow;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
}