Reconmap/web-client

.collapsed .sidebar {
  a span {
    color: transparent;
    display: none;
  }
  a svg:last-child {
    color: transparent;
  }
  a.sublink {
    padding-left: var(--space-sm);
  }
  #collapse--button{
    cursor: e-resize;
  }
  button {
    display: inline;
    width: min-content;
    padding : var(--space-sm);
    svg{
      margin: 0; padding: 0;
    }
    span {
      display: none;
    }
  }

}

aside.sidebar {
  position: sticky;
  top: 72px;
  height: min-content;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--padding) / 2);

  #collapse--button{
    position: absolute;
    top:var(--space-lg);
    right:0px;
    height: calc(100% - calc(var(--space-lg) * 2)) ;
    width: calc(var(--borderWidth) * 2 );
    cursor: w-resize;
    border-radius: var(--borderRadius);
    background-color: var(--black);
    z-index: 11;
    transition: background-color .2s;
    &:hover {
      background-color: var(--primary-color);
    }
  }

  a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-color);
    border-left: var(--borderWidth) solid transparent;
    padding: var(--space-xs);
    padding-right: 0;
    span {
      margin-right: var(--space-sm);
    }
    svg:last-child {
      margin-left: auto;
      opacity: .4;
      width: 16px;
      height: 16px;
      margin-right: 0;
      transition: transform .1s;
    }
    &:hover, &.active {
      color: var(--text-color);
      border-left: var(--borderWidth) solid var(--primary-color);
    }

    &:before {
      content: attr(data-label);
      position: absolute;
      top: -6px;
      bottom: 0;
      left: 24px;
      margin-right: -90px;
      z-index: 20;
      align-items: center;
      border-radius: var(--borderRadius);
      padding: var(--padding);
      background-color: var(--black);
      color: var(--text-color);
      text-align: left;
      width: max-content;
      transition: var(--transitionTime);
      font-size: var(--fontSizeBody);
      display: none;
    }
  }

  a.sublink {
    padding-left: calc(var(--space) * 1.5);
    font-size: var(--fontSizeSmall);

    i {
      font-size: large;
      margin-right: 3px;
    }
  }
}