cyb/src/pages/Settings/Layout/SettingsMenu/SettingsMenu.module.scss

.wrapper {
  width: 200px;

  .links {
    display: grid;
    gap: 25px;
  }

  a {
    display: flex;
    gap: 15px;
    line-height: 32px;
    white-space: nowrap;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      transition: background 0.2s;
    }

    .text {
      color: var(--grayscale-primary);
    }

    &:hover,
    &.active {
      .text {
        color: var(--primary-color);
      }

      .icon {
        background: var(--primary-color);
      }
    }
  }

  @media (max-width: 540px) {
    width: 48px;
    position: relative;
    z-index: 10;

    // remove Display inner padding, shift icons 5px left of center
    :global(.inner) {
      padding: 8px 0 !important;
    }

    a {
      justify-content: center;
      margin-left: -3px;

      .text {
        display: none;
      }
    }

    .links {
      gap: 15px;
    }

    // expand on tap — glass panel over content, collapses on nav click
    &.expanded {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 200px;
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      background: rgba(17, 17, 17, 0.75);
      border-radius: 0 12px 12px 0;
      padding: 8px 0;
      transition: width 0.15s ease;

      a {
        justify-content: flex-start;

        .text {
          display: inline;
        }
      }
    }
  }
}