Vertical Nav Rail

<nav class="nuda-navx-rail" aria-label="App navigation">
  <div class="nuda-navx-rail__brand">
    <span class="nuda-navx-rail__logo">N</span>
  </div>
  <ul class="nuda-navx-rail__list">
    <li>
      <a class="nuda-navx-rail__item nuda-navx-rail__item--active" href="#" aria-current="page">
        <svg class="nuda-navx-rail__ico" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h4a1 1 0 001-1v-3h2v3a1 1 0 001 1h4a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
        <span class="nuda-navx-rail__label">Home</span>
      </a>
    </li>
    <li>
      <a class="nuda-navx-rail__item" href="#">
        <svg class="nuda-navx-rail__ico" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>
        <span class="nuda-navx-rail__label">Search</span>
      </a>
    </li>
    <li>
      <a class="nuda-navx-rail__item" href="#">
        <svg class="nuda-navx-rail__ico" viewBox="0 0 20 20" fill="currentColor"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
        <span class="nuda-navx-rail__label">Apps</span>
      </a>
    </li>
    <li>
      <a class="nuda-navx-rail__item" href="#">
        <svg class="nuda-navx-rail__ico" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>
        <span class="nuda-navx-rail__label">Settings</span>
      </a>
    </li>
  </ul>
</nav>

.nuda-navx-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 64px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: .75rem .5rem;
  min-height: 220px;
}

.nuda-navx-rail__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.nuda-navx-rail__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #e4ff54;
  border-radius: 8px;
  font-weight: 800;
  font-size: .9rem;
  color: #0a0a0a;
}

.nuda-navx-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.nuda-navx-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #555;
  text-decoration: none;
  padding: .5rem .25rem;
  border-radius: 10px;
  font-size: .6rem;
  font-weight: 500;
  transition: color .2s,background .2s;
  position: relative;
}

.nuda-navx-rail__item:hover {
  color: #cfcfcf;
  background: rgba(255,255,255,.06);
}

.nuda-navx-rail__item--active {
  color: #e4ff54;
  background: rgba(228,255,84,.1);
}

.nuda-navx-rail__item--active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #e4ff54;
  border-radius: 0 3px 3px 0;
}

.nuda-navx-rail__ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nuda-navx-rail__label {
  line-height: 1;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-navx-rail__item {
    transition: none;
  }
}