hubl/src/styles/components/sidebar.scss

.no-sidebar {
  flex: 1;
  @extend %padding-main;
}

.with-sidebar {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow-x: hidden;

  .views-container {
    flex: 1 0 0;
    overflow-y: auto;
    -webkit-backface-visibility: hidden;

    &.sidebar-is-closed {
      margin-left: -15.5rem;
      transform: translate(15.5rem);
    }
  }

  >div {
    transition: all 0.5s;
  }

  nav {
    transition: all 0.5s;

    >sib-router {
      background-color: $color-222-52-90;
      color: $color-233-18-29;
      flex: 0 0 auto;
      font-weight: 600;

      >ul {
        cursor: pointer;
        list-style: none;
        margin: 0;
        padding-left: 0;

        li {
          align-items: center;
          border-bottom: 1px solid $color-229-25-79;
          display: flex;
          margin: 0;
          padding: 2.15rem 2.55rem;
          position: relative;
          width: 12em;

          &::before {
            float: left;
            font-size: 4rem;
            margin-left: 0;
            margin-right: 2.55rem;
          }
        }

        >li {
          @include icon('arrow-right-circle');
        }

        >sib-route {

          &[active] {
            background-color: $color-233-18-29;
            color: $color-46-100-67;
            display: inline-block;
          }

          &[name^='circle'],
          &[name^='project'] {

            >li::before {
              font-size: 4rem;
            }
          }

          &[name$='chat']>li {
            @include ci('chat');
          }

          &[name$='create']>li {
            @include ci('offer');
          }

          &[name$='edit']>li {
            @include ci('list');
          }

          &[name$='profile']>li, &[name$='information']>li  {
            @include ci('information');
          }

          &[name$='drive']>li {
            @include ci('file');
          }
        }
      }
    }

    &.offsite-is-closed {
      transform: translate(15.5rem);

      & .jsOffsiteToggle::before {
        transform: rotate(180deg);
      }
    }
  }
}