Буквы вертикальной навигации CSS

Я очень новичок, пытаюсь реализовать вертикальную навигацию, где даже ссылки и буквы вертикальны. До сих пор я делал все вертикально, но теперь у меня проблемы с хлюпанием ссылок, потому что у них нет места?

На рисунке 1 вы видите, что я пытаюсь сделать, а на рисунке 2 показано, что я уже сделал.

Не уверен, должен ли дисплей быть блочным или встроенным блоком.

вертикальная навигация

Вот мой код: html (с php)

    <div class = "container">
  <div class = "navigation">
    <div class = "navigation__left">
      <a class = "header__logo" href = "<?= home_url(); ?>"><?php bloginfo('name'); ?></a>
    </div>
    <nav aria-label = "primary">
      <div class = "inner">
        <?php dazy_top_nav(); ?>
      </div>
    </nav>
  </div>
</div>

СКСС:

.menu {
  margin: 5px 0 0;
  padding: rem-calc(100 20);
  list-style: none;
  font-size: rem-calc(22);
  text-align: center;
  @include breakpoint($medium) {
    margin: rem-calc(0 -15);
    padding: 0;
    font-family: $regular;
    font-size: unquote("clamp(0.938rem, 0.5vw + 0.8rem, 1.375rem)");
    font-weight: 400;
    line-height: unquote("clamp(1.25rem, 0.9vw + 1rem, 2.125rem)");
    letter-spacing: -0.01em;
    text-align: initial;
  }
  &__item {
    padding: rem-calc(10 0);
    width: 100%;
    white-space: nowrap;
    @include breakpoint($medium) {
      padding: rem-calc(20 0);
    }
  }
  &__link {
    color: $black;
    text-decoration: none;
    display: block;
    transform: rotate(-90deg);

и:

.navigation {
  height: 100%;
  width: 49px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  overflow-x: hidden;
  padding-top: 20px;
  .inner {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    list-style: none;
    background-color: $white-fever;
    transition: transform linear 300ms;
    visibility: hidden;
    @include breakpoint($medium) {
      padding: 0;
      transform: translateY(0);
      flex-direction: row;
      background-color: transparent;
      position: relative;
      visibility: visible;
      transition: none;
    }
    .is-open & {
      transform: translateY(0);
    }
  }
}