iOS Settings Menu

<!--
  Day 12: iOS Settings menu

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- iOS Settings Menu -->
<div
  class="relative mx-auto grid w-full max-w-sm grid-cols-1 gap-4 rounded-3xl bg-white/40 p-4 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
  <div class="mx-auto flex w-full flex-col gap-4 rounded-xl bg-gray-200/50 p-6">
    <h1 class="text-2xl font-bold">Settings</h1>

    <!-- Search -->
    <form class="flex rounded-lg bg-gray-300/50">
      <div class="flex flex-none items-center justify-center p-2 text-gray-500">
        <svg
          class="hi-mini hi-magnifying-glass inline-block size-5"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <input
        type="text"
        placeholder="Search.."
        class="z-1 w-full grow border-0 bg-transparent p-2 placeholder-gray-500 focus:ring-2 focus:ring-gray-300"
      />
      <button
        type="button"
        class="flex flex-none items-center justify-center rounded-r-lg p-2 text-gray-500 hover:text-gray-800 focus:ring-2 focus:ring-gray-300 focus:outline-hidden"
      >
        <svg
          class="hi-mini hi-microphone inline-block size-5"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path d="M7 4a3 3 0 016 0v6a3 3 0 11-6 0V4z" />
          <path
            d="M5.5 9.643a.75.75 0 00-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-1.5v-1.546A6.001 6.001 0 0016 10v-.357a.75.75 0 00-1.5 0V10a4.5 4.5 0 01-9 0v-.357z"
          />
        </svg>
      </button>
    </form>
    <!-- END Search -->

    <!-- Navigation -->
    <nav class="overflow-hidden rounded-lg bg-white">
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-orange-500 text-white"
        >
          <svg
            class="bi bi-airplane-fill inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Airplane Mode</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-blue-500 text-white"
        >
          <svg
            class="bi bi-wifi inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z"
            />
            <path
              d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.455 9.455 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091l.016-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Wi-Fi</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-blue-500 text-white"
        >
          <svg
            class="bi bi-bluetooth inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="m8.543 3.948 1.316 1.316L8.543 6.58V3.948Zm0 8.104 1.316-1.316L8.543 9.42v2.632Zm-1.41-4.043L4.275 5.133l.827-.827L7.377 6.58V1.128l4.137 4.136L8.787 8.01l2.745 2.745-4.136 4.137V9.42l-2.294 2.274-.827-.827L7.133 8.01ZM7.903 16c3.498 0 5.904-1.655 5.904-8.01 0-6.335-2.406-7.99-5.903-7.99C4.407 0 2 1.655 2 8.01 2 14.344 4.407 16 7.904 16Z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Bluetooth</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-green-500 text-white"
        >
          <svg
            class="bi bi-phone-vibrate-fill inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M4 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm5 7a1 1 0 1 0-2 0 1 1 0 0 0 2 0zM1.807 4.734a.5.5 0 1 0-.884-.468A7.967 7.967 0 0 0 0 8c0 1.347.334 2.618.923 3.734a.5.5 0 1 0 .884-.468A6.967 6.967 0 0 1 1 8c0-1.18.292-2.292.807-3.266zm13.27-.468a.5.5 0 0 0-.884.468C14.708 5.708 15 6.819 15 8c0 1.18-.292 2.292-.807 3.266a.5.5 0 0 0 .884.468A7.967 7.967 0 0 0 16 8a7.967 7.967 0 0 0-.923-3.734zM3.34 6.182a.5.5 0 1 0-.93-.364A5.986 5.986 0 0 0 2 8c0 .769.145 1.505.41 2.182a.5.5 0 1 0 .93-.364A4.986 4.986 0 0 1 3 8c0-.642.12-1.255.34-1.818zm10.25-.364a.5.5 0 0 0-.93.364c.22.563.34 1.176.34 1.818 0 .642-.12 1.255-.34 1.818a.5.5 0 0 0 .93.364C13.856 9.505 14 8.769 14 8c0-.769-.145-1.505-.41-2.182z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Cellular</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-green-500 text-white"
        >
          <svg
            class="bi bi-chevron-bar-contract inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M3.646 14.854a.5.5 0 0 0 .708 0L8 11.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708zm0-13.708a.5.5 0 0 1 .708 0L8 4.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zM1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Personal Hotspot</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-blue-500 text-white"
        >
          <span class="text-xs">VPN</span>
        </div>
        <div
          class="flex grow items-center justify-between py-2.5 group-hover:border-transparent"
        >
          <div class="font-medium">VPN</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
    </nav>
    <!-- END Navigation -->

    <!-- Navigation -->
    <nav class="overflow-hidden rounded-lg bg-white">
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-rose-500 text-white"
        >
          <svg
            class="bi bi-bell-fill inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Notifications</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-pink-500 text-white"
        >
          <svg
            class="bi bi-volume-up-fill inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
            />
            <path
              d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
            />
            <path
              d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Sound &amp; Haptics</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-indigo-500 text-white"
        >
          <svg
            class="bi bi-moon-fill inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between border-b border-gray-100 py-2.5 group-hover:border-gray-200"
        >
          <div class="font-medium">Focus</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
      <a
        href="javascript:void(0)"
        class="group flex items-center gap-4 hover:bg-gray-200"
      >
        <div
          class="ml-4 flex size-7 flex-none items-center justify-center rounded-lg bg-indigo-500 text-white"
        >
          <svg
            class="bi bi-hourglass-split inline-block size-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"
            />
          </svg>
        </div>
        <div
          class="flex grow items-center justify-between py-2.5 group-hover:border-transparent"
        >
          <div class="font-medium">Screen Time</div>
          <div class="flex-none pr-2 text-gray-400">
            <svg
              class="bi bi-chevron-right inline-block size-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 16 16"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
              />
            </svg>
          </div>
        </div>
      </a>
    </nav>
    <!-- END Navigation -->
  </div>
</div>
<!-- END iOS Settings Menu -->