.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;

  position: sticky;
  top: 50px;

  width: 20%;

  &__nav {
    width: 100%;
    max-height: 80vh;
    overflow: auto;

    list-style: none;

  }

  &__container {
    display: flex;
    align-items: center;

    padding: 5px;

    &--selected, &:hover {
      background-color: var(--lighter-accent-color);
    }
  }

  &__icon {
    &:hover {
      cursor: pointer;
    }
  }

  &__text {
    display: flex;
    justify-content: space-between;

    width: 100%;
    padding: 0 0 0 20px;

    overflow: hidden;
    white-space: nowrap;

    &:hover {
      cursor: pointer;
    }
  }

  .read-button {
    margin: 20px 0 0 0;
  }
}
