Expandable list

by Marcos Moitas

HTML

<div style="height: 100%;">
<!-- ^ The container div above is not part of the component -->
  <nav role="navigation" class="wv-side-bar">
    <ul class="wv-side-bar__menu">
      <li class="wv-side-bar__menu__item is-current">
        <div class="wv-side-bar__menu__item__icon">a</div>
        <a class="wv-side-bar__menu__item__label" href="#">Create new</a>
        <div class="wv-side-bar__menu__item__chevron">c</div>
      </li>
      <li class="wv-side-bar__menu__item is-current">
        <div class="wv-side-bar__menu__item__icon">a</div>
        <a class="wv-side-bar__menu__item__label" href="#">Dashboard</a>
        <div class="wv-side-bar__menu__item__chevron">c</div>
      </li>
      <li class="wv-side-bar__menu__item is-current">
        <div class="wv-side-bar__menu__item__icon">a</div>
        <a class="wv-side-bar__menu__item__label" href="#">Sales</a>
        <div class="wv-side-bar__menu__item__chevron">c</div>
      </li>
        
        <ul class="wv-side-bar__menu__nested">
          <li class="wv-side-bar__menu__item__nested">
            <a class="wv-side-bar__menu__item__nested__label" href="#">Estimates</a>
          </li>
          <li class="wv-side-bar__menu__item__nested">
            <a class="wv-side-bar__menu__item__nested__label" href="#">Invoices</a>
          </li>
          <li class="wv-side-bar__menu__item__nested">
            <a class="wv-side-bar__menu__item__nested__label" href="#">Payments</a>
          </li>
        </ul>
        
      
      <li class="wv-side-bar__menu__item is-current">
        <div class="wv-side-bar__menu__item__icon">a</div>
        <a class="wv-side-bar__menu__item__label" href="#">Expenses</a>
        <div class="wv-side-bar__menu__item__chevron">c</div>
      </li>
    </ul>
  </nav>
<!-- closes the container that's not part of the component -->
</div>

SCSS

.wv-side-bar {
  width: 224px;
  
  &.is-closed {
    width: 56px;
    overflow: hidden;
  }
}

.wv-side-bar__menu {
  display: flex;
  margin: 0;
  padding: 0;
  flex-flow: column;
  list-style-type: none;
  background: #f5f5f5;
  
  &__nested {
    display: flex;
    flex-flow: column;
    margin: 0;
    padding: 0 8px;
    width: 100%;
    list-style-type: none;
    
    
  }
}

.wv-side-bar__menu__item {
  display: flex;
  flex-flow: row;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  margin: 0;
  box-sizing: border-box;
  background: #efefef;
  
  a {
    flex: 1;
    text-decoration: none;
  }
  
  &__icon {
    width: 20px;
    height: 20px;
    background: aqua;
  }
  
  &__label {
    padding: 8px;
    background: #ccc;
  }
  
  &__chevron {
    width: 14px;
    height: 14px;
    background: red;
  }
  
  &__nested {
    width: 100%;
    height: 32px;
    padding: 8px 0 0 28px;
    margin: 0;
  }
}