Vertical Sidebar Navigation with Animated Glider

<aside class="lg:col-span-1 relative"
  style="--main-color: #f43f5e; --main-color-opacity: rgba(244, 63, 94, 0.11); --total-radio: 4">
  <style>
    .radio-nav-container {
      display: flex;
      flex-direction: column;
      position: relative;
      padding-left: 0.5rem;
    }

    .radio-nav-container input {
      cursor: pointer;
      appearance: none;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .radio-nav-container .glider-container {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(0deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(27, 27, 27, 1) 50%,
          rgba(0, 0, 0, 0) 100%);
      width: 1px;
      pointer-events: none;
    }

    .radio-nav-container .glider-container .glider {
      position: relative;
      height: calc(100% / var(--total-radio));
      width: 100%;
      background: linear-gradient(0deg,
          rgba(0, 0, 0, 0) 0%,
          var(--main-color) 50%,
          rgba(0, 0, 0, 0) 100%);
      transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);
    }

    .radio-nav-container .glider-container .glider::before {
      content: "";
      position: absolute;
      height: 60%;
      width: 300%;
      top: 50%;
      transform: translateY(-50%);
      background: var(--main-color);
      filter: blur(10px);
    }

    .radio-nav-container .glider-container .glider::after {
      content: "";
      position: absolute;
      left: 0;
      height: 100%;
      width: 150px;
      background: linear-gradient(90deg,
          var(--main-color-opacity) 0%,
          rgba(0, 0, 0, 0) 100%);
    }

    .radio-nav-container label {
      cursor: pointer;
      padding: 0.75rem;
      position: relative;
      color: rgb(163, 163, 163);
      transition: all 0.3s ease-in-out;
      border-radius: 0.75rem;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .radio-nav-container input:checked+label {
      color: var(--main-color);
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .radio-nav-container input:nth-of-type(1):checked~.glider-container .glider {
      transform: translateY(0);
    }

    .radio-nav-container input:nth-of-type(2):checked~.glider-container .glider {
      transform: translateY(100%);
    }

    .radio-nav-container input:nth-of-type(3):checked~.glider-container .glider {
      transform: translateY(200%);
    }

    .radio-nav-container input:nth-of-type(4):checked~.glider-container .glider {
      transform: translateY(300%);
    }
  </style>

  <div class="radio-nav-container">
    <input type="radio" id="nav-home" name="nav-menu" checked="">
    <label for="nav-home" class="text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[18px] h-[18px]">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path>
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path>
      </svg>
      Home
    </label>

    <input type="radio" id="nav-dashboard" name="nav-menu">
    <label for="nav-dashboard" class="text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[18px] h-[18px]">
        <path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
        <rect x="15" y="5" width="4" height="12" rx="1" class=""></rect>
        <rect x="7" y="8" width="4" height="9" rx="1" class=""></rect>
      </svg>
      Dashboard
    </label>

    <input type="radio" id="nav-calendar" name="nav-menu">
    <label for="nav-calendar" class="text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[18px] h-[18px]">
        <path d="M8 2v4" class=""></path>
        <path d="M16 2v4" class=""></path>
        <rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
        <path d="M3 10h18" class=""></path>
        <path d="M8 14h.01" class=""></path>
        <path d="M12 14h.01" class=""></path>
        <path d="M16 14h.01" class=""></path>
        <path d="M8 18h.01" class=""></path>
        <path d="M12 18h.01" class=""></path>
        <path d="M16 18h.01" class=""></path>
      </svg>
      Calendar
    </label>

    <input type="radio" id="nav-projects" name="nav-menu">
    <label for="nav-projects" class="text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[18px] h-[18px]">
        <path d="M4 10a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" class=""></path>
        <path d="M8 10h8" class=""></path>
        <path d="M8 18h8" class=""></path>
        <path d="M8 22v-6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v6" class=""></path>
        <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" class=""></path>
      </svg>
      Projects
    </label>

    <div class="glider-container">
      <div class="glider"></div>
    </div>
  </div>
</aside>