<div class="device device-iphone-x">
  <div class="device-frame">
    <div class="device-content">
      <div class="container">
        <ul class="nav">
          <li>
            <svg t="1657252145353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200">
              <path d="M267.168 454.624v316.48h152V598.224c0-6.144 4.992-11.12 11.136-11.12h169.728c6.16 0 11.136 4.976 11.136 11.12v172.88h136V453.6l-239.36-188.848-240.64 189.856z m-48 37.872l-39.36 31.04a16 16 0 0 1-22.464-2.656l-9.904-12.56a16 16 0 0 1 2.656-22.464l347.792-274.416a16 16 0 0 1 19.84 0l347.792 274.4a16 16 0 0 1 2.656 22.48l-9.92 12.56a16 16 0 0 1-22.464 2.656l-40.624-32.048v292.48a35.136 35.136 0 0 1-35.136 35.136H254.304a35.136 35.136 0 0 1-35.136-35.136V492.496z m248 270.608h96v-128h-96v128z" p-id="2674" fill="currentColor"></path>
            </svg>
            <a href="#">home</a>
          </li>
          <li>
            <svg t="1657252201263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200">
              <path d="M674.784 797.072v-7.84c0-7.104-4.576-24.512-13.168-44.32a310.816 310.816 0 0 0-45.536-73.744c-47.168-56.736-108.48-89.76-182.688-89.76-74.192 0-135.52 33.04-182.672 89.808a310.976 310.976 0 0 0-45.552 73.808c-8.576 19.84-13.168 37.264-13.168 44.4v7.648h482.784zM589.424 506.08c1.2-6.432 7.184-8 10.272-8.272a112.192 112.192 0 0 0 101.696-111.68V335.68a112.192 112.192 0 0 0-96.784-111.12c-5.024-0.704-15.392-0.704-15.392-17.584v-16.512c0-16.256 10.768-14.688 16.032-14.16 80.944 8.032 144.144 76.32 144.144 159.36v50.448c0 57.168-29.952 107.344-75.008 135.68 51.68 21.072 95.68 55.28 130.608 98.48 36.96 45.712 60.992 99.808 60.992 132.416v76.384a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-76.384c0-20.048-19.68-64.336-50.32-102.24-40.56-50.176-94.88-85.856-160.224-98.8a57.952 57.952 0 0 0-5.184-0.736 16 16 0 0 1-14.352-15.92v-20.24c-0.128-3.92 0.48-6.704 1.52-8.672z m-224.672 35.76a150.288 150.288 0 0 1-87.2-136.416V349.76a150.256 150.256 0 1 1 300.528 0v55.664a150.256 150.256 0 0 1-83.472 134.64c156.944 35.152 228.16 199.648 228.16 249.168v39.84a16 16 0 0 1-16 16H160a16 16 0 0 1-16-16v-39.648c0-48.832 68.992-208.992 220.752-247.584zM427.84 247.52a102.256 102.256 0 0 0-102.256 102.256v55.664a102.256 102.256 0 1 0 204.512 0V349.76a102.256 102.256 0 0 0-102.24-102.24z" p-id="2674" fill="currentColor"></path>
            </svg>
            <a href="#">Hi Thisisalonglonglonglonglonglongword</a>
          </li>
          <li>
            <svg t="1657252312570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="200" height="200">
              <path d="M316.8 557.6a15.632 15.632 0 0 0-9.6 4.208c-2.72 2.864-3.328 7.184-3.184 9.456 6.576 102.16 86.352 184.32 187.184 193.952v53.216a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-52.944c20.72-1.664 40.864-6.4 59.936-14.016a12.912 12.912 0 0 0 6.624-6.944c1.344-3.472 1.072-8.08 0.176-9.952l-9.952-20.864c-0.848-1.76-3.392-5.264-7.2-6.464-3.472-1.12-8.16-0.064-10.112 0.688a158.144 158.144 0 0 1-56.144 10.224h-11.456c-84 0-152.88-65.392-159.04-148.432a16.96 16.96 0 0 0-3.872-8.4 12.128 12.128 0 0 0-8.224-3.744z m40.64-350.56a16 16 0 0 0-22.24-4.192l-13.216 9.024a16 16 0 0 0-4.192 22.24l366.88 536.928a16 16 0 0 0 22.24 4.192l13.216-9.024a16 16 0 0 0 4.176-22.24z m47.36 193.216a168.64 168.64 0 0 0-21.6 0c-10.4 1.072-13.6 8.176-13.6 12.272v123.84a147.872 147.872 0 0 0 192.688 140.96c4.112-0.976 8.112-7.2 4.56-15.2l-8.256-21.008c-1.792-7.792-9.792-10.672-14.96-8.32a99.872 99.872 0 0 1-126.032-96.432v-123.84c0-8-5.712-11.2-12.8-12.272z m289.344 157.328c-2.256 0.016-6.032 0.208-8.544 2.144-3.088 2.368-4.416 7.184-4.832 9.536-2.032 11.408-6.4 26.752-12.272 43.36-0.688 1.984-1.888 6.896-0.496 10.304 1.424 3.44 5.456 5.376 7.36 6.08l21.456 8.176c2.08 0.8 7.552 2.784 11.344 0.944 2.976-1.456 4.544-6.48 5.152-8.192l0.416-1.2c8.08-22.8 13.76-43.584 15.632-60.192a10.4 10.4 0 0 0-3.76-8.176c-2.56-2.08-6.72-2.784-8.8-2.784zM517.472 192a147.36 147.36 0 0 0-90.88 31.2c-7.392 4.848-8.992 14.928-1.984 21.856l12.112 12.368c6.48 6.304 16.08 4.704 22.656 1.2a99.872 99.872 0 0 1 157.984 81.264v196.48c0 5.44 1.84 13.76 12.784 15.328l20 2.688c9.056 0.544 14.864-6.016 15.056-11.2l0.16-4.48V339.856A147.872 147.872 0 0 0 517.472 192z" p-id="2813" fill="currentColor"></path>
            </svg>
            <a href="">microphone off</a>
          </li>
          <li>
            <svg t="1657252377807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2951" width="200" height="200">
              <path d="M288 171.136c0-6.16 4.976-11.136 11.136-11.136h425.728c6.16 0 11.136 4.976 11.136 11.136v585.728a11.136 11.136 0 0 1-11.136 11.136H299.136a11.136 11.136 0 0 1-11.136-11.136V171.136zM336 208v512h352V208H336z m336 608a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H352a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16h320z m-80-432a16 16 0 0 1 15.888 14.128L608 400v160a16 16 0 0 1-14.128 15.888L592 576h-16a16 16 0 0 1-15.888-14.128L560 560V400a16 16 0 0 1 14.128-15.888L576 384h16z m-144 0a16 16 0 0 1 15.888 14.128L464 400v160a16 16 0 0 1-14.128 15.888L448 576h-16a16 16 0 0 1-15.888-14.128L416 560V400a16 16 0 0 1 14.128-15.888L432 384h16z" p-id="2952" fill="currentColor"></path>
            </svg>
            <a href="">diffuser stop</a>
          </li>
          <li>
            <svg t="1657252476451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3090" width="200" height="200">
              <path d="M388.528 396.72h258.752l68.768-91.6c13.984-16.592 33.168-28.096 54.416-31.712 54.88-9.216 105.36 28 105.36 78.256v117.392a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-117.392c0-18.944-22.4-35.456-49.36-30.928a43.12 43.12 0 0 0-24.864 14.256l-82.336 109.728h-306.72l-7.2-9.6-74.272-99.072c-6.88-8.16-16.064-13.664-25.728-15.312-26.512-4.528-49.344 13.28-49.344 35.568v361.68h396.48a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H200.688c-22.08 0-40.688-17.28-40.688-39.488V356.304c0-52.944 50.432-92.272 105.408-82.88 21.2 3.6 40.384 15.104 55.2 32.768l67.92 90.528zM594.08 600.368c0-46.304 38.56-83.488 85.696-83.488 20.656 0 40.048 7.2 55.184 19.616a86.944 86.944 0 0 1 55.2-19.616c47.12 0 85.664 37.184 85.664 83.488a82.08 82.08 0 0 1-22.352 56.224c-0.72 0.96-1.536 1.872-2.432 2.736l-102.464 99.152a24 24 0 0 1-33.888-0.48l-96.64-99.168a24.512 24.512 0 0 1-3.024-3.776 82 82 0 0 1-20.944-54.688z m138.304 106.992l83.136-80.464c0.56-0.688 1.168-1.344 1.824-1.984 6.72-6.608 10.48-15.296 10.48-24.544 0-19.392-16.672-35.488-37.68-35.488-14.64 0-27.632 7.904-33.888 19.952-8.96 17.248-33.648 17.248-42.592 0-6.256-12.048-19.264-19.952-33.888-19.952-21.008 0-37.696 16.096-37.696 35.488 0 9.232 3.744 17.888 10.432 24.48 1.216 1.2 2.272 2.48 3.168 3.824l76.704 78.688z" p-id="3091" fill="currentColor"></path>
            </svg>
            <a href="">entertainment mark</a>
          </li>
        </ul>
      </div>

      <div id="switch--wrapper">
        <input type="checkbox" id="switch" name="switch" />
        <label for="switch"></label>
      </div>

    </div>
  </div>
  <div class="device-stripe"></div>
  <div class="device-header"></div>
  <div class="device-sensors"></div>
  <div class="device-btns"></div>
  <div class="device-power"></div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 1rem;
}

.device-iphone-x {
  height: min(100vh - 2rem, 100vh);
  min-height: 540px;
}

.device-iphone-x .device-frame,
.device-iphone-x .device-content {
  height: 100%;
}

.device-iphone-x .device-content {
  overflow: hidden auto;
}

.container {
  padding: 3rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

:root {
  --white: #ffffff;
  --light: #f0eff3;
  --black: #000000;
  --dark-blue: #1f2029;
  --dark-light: #353746;
  --red: #3c0076;
  --yellow: #a500ff;
  --grey: #ecedf3;
}

#switch--wrapper {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  transform: translate3d(-50%, 0, 0);
  z-index: 999;
  bottom: 2rem;
  text-align: center;
}

#switch--wrapper span {
  margin-top: 1rem;
  color: #444;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label {
  position: relative;
  width: 70px;
  display: inline-block;
  padding: 0;
  text-align: center;
  height: 6px;
  border-radius: 4px;
  background-image: linear-gradient(298deg, var(--red), var(--yellow));
  z-index: 100 !important;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
  position: absolute;
  font-weight: 900;
  cursor: pointer;
  top: -17px;
  z-index: 2;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 300ms linear;
}
[type="checkbox"]:not(:checked) + label:before {
  content: "Off";
  left: 0;
  color: var(--grey);
  background-color: var(--dark-light);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(26, 53, 71, 0.07);
}
[type="checkbox"]:checked + label:before {
  content: "On";
  left: 30px;
  color: var(--yellow);
  background-color: var(--dark-blue);
  box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
}

svg {
  width: 1em;
  height: 1em;
  display: block;
}

ul {
  list-style: none outside none;
}

.nav {
  color: #777d82;
  width: 100%;
  border: 1px solid #f2f3f3;
  padding: 0 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 0.125em 0.0125em rgb(0 0 0 / 25%);
}

.nav li {
  font-size: clamp(1.12rem, 1vw + 1.15rem, 1.1625rem);
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 1em 0.5em;
  letter-spacing: 0.0125em;
}

.nav li + li {
  border-top: 1px dashed #bbafaf;
}

.nav svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.nav a {
  text-decoration: none;
  text-transform: capitalize;
  color: #777d82;
  transition: all 0.2s linear;
  min-width: 0;
}

.nav a:hover,
.nav li:hover svg {
  color: #4a1b41;
}

.ellipsis .nav a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

const checkedEle = document.querySelector("#switch--wrapper");
const rootEle = document.documentElement;

checkedEle.addEventListener("change", (e) => {
  if (e.target.checked) {
    rootEle.classList.add("ellipsis");
  } else {
    rootEle.classList.remove("ellipsis");
  }
});