<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<nav>
  <label><input type="checkbox" name="open-menu" checked><i class="fa-solid fa-bars fa-fw open"></i><i class="fa-solid fa-xmark fa-fw close"></i></label>
  
  <a href="#"><i class="fa-solid fa-house fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-phone fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-envelope fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-pen-to-square fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-trash-can fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-chart-line fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-user fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-circle-info fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-gear fa-fw"></i></a>
  <a href="#"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a>
</nav>

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 100%;
}

nav {
  --child-count: 1;
  --radius: 30px;
  
  position: relative;
  
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border: 2px solid #21759b;
  border-radius: 50%;
  
  transition: .5s all ease-in-out;
}

nav:has(> a:nth-of-type(1)) {--child-count: 1;}
nav:has(> a:nth-of-type(2)) {--child-count: 2;}
nav:has(> a:nth-of-type(3)) {--child-count: 3;}
nav:has(> a:nth-of-type(4)) {--child-count: 4;}
nav:has(> a:nth-of-type(5)) {--child-count: 5;}
nav:has(> a:nth-of-type(6)) {--child-count: 6;}
nav:has(> a:nth-of-type(7)) {--child-count: 7;}
nav:has(> a:nth-of-type(8)) {--child-count: 8;}
nav:has(> a:nth-of-type(9)) {--child-count: 9;}
nav:has(> a:nth-of-type(10)) {--child-count: 10;}

nav > a:nth-of-type(1) {--nth-child: 1;}
nav > a:nth-of-type(2) {--nth-child: 2;}
nav > a:nth-of-type(3) {--nth-child: 3;}
nav > a:nth-of-type(4) {--nth-child: 4;}
nav > a:nth-of-type(5) {--nth-child: 5;}
nav > a:nth-of-type(6) {--nth-child: 6;}
nav > a:nth-of-type(7) {--nth-child: 7;}
nav > a:nth-of-type(8) {--nth-child: 8;}
nav > a:nth-of-type(9) {--nth-child: 9;}
nav > a:nth-of-type(10) {--nth-child: 10;}

nav:has([name="open-menu"]:checked) {
  --radius: max(60px, calc(var(--child-count) * 20px));
}

nav > a {
  --angle: calc((var(--nth-child) - 1) * ( 360deg / var(--child-count)));
  
  position: absolute;
  top: calc(50% - var(--radius) * cos(var(--angle)));
  left: calc(50% + var(--radius) * sin(var(--angle)));
  translate: -50% -50%;
  
  padding: 10px;
  border-radius: 50%;
  
  color: #21759b;
  background: white;
  font-size: 25px;
  scale: 0;
  transition: .5s all ease-in-out;
}

nav > a:hover {
  scale: 1.6 !important;
}

nav:has([name="open-menu"]:checked) > a {
  scale: 1;
}

nav > label {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  
  display: block;
  
  width: 60px;
  height: 60px;
  
  color: #21759b;
  font-size: 30px;
  cursor: pointer;
  transition: .5s all ease-in-out;
}

nav > label:hover {
  opacity: .5;
}

nav:has([name="open-menu"]:checked) > label {
  rotate: 90deg;
}

nav > label input {
  display: none;
}

nav > label > i {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  
  scale: 1;
  transition: .25s ease-in-out all;
}

nav > label > i.close {
  scale: 1.5;
}

nav:has([name="open-menu"]:checked) > label > i.open,
nav:not(:has([name="open-menu"]:checked)) > label > i.close {
  scale: 0;
}