Sidebar

<div class="flex flex-col gap-32px py-24px px-16px sm:px-16px md:px-24px max-w-[212px] w-full min-h-[700px]">
  <a
    class="flex font-bold gap-8px items-center no-underline text-foreground! logo text-h8 [&_svg]:w-[28px] [&_svg]:h-[28px] px-12px!"
    href="/">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <rect
        width="24"
        height="24"
        rx="2"
        fill="black">
      </rect>
      <path
        d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
        stroke="white"
        stroke-width="4">
      </path>
      <path
        d="M12.5 14.5L18.9952 18.25"
        stroke="white"
        stroke-width="4.5">
      </path>
      <circle
        cx="15.25"
        cy="8.25"
        r="3.25"
        fill="white">
      </circle>
    </svg>
    Kaida
  </a>
  <div class="flex flex-col flex-1 gap-12px justify-between">
    <div class="flex flex-col gap-4px">
      <div class="flex flex-col gap-8px group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 min-w-[180px]"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Menu
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[aria-expanded=true]]:max-h-[200px] group-has-[button[aria-expanded=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-[10px] pe-0 sm:pe-[10px]">
              <div class="w-[1px] bg-accent-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 1
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 2
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 3
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-8px group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 min-w-[180px]"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Menu
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[aria-expanded=true]]:max-h-[200px] group-has-[button[aria-expanded=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-[10px] pe-0 sm:pe-[10px]">
              <div class="w-[1px] bg-accent-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 1
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 2
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 3
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-8px group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 min-w-[180px]"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Menu
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[aria-expanded=true]]:max-h-[200px] group-has-[button[aria-expanded=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-[10px] pe-0 sm:pe-[10px]">
              <div class="w-[1px] bg-accent-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 1
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 2
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 3
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-8px group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 min-w-[180px]"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Menu
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[aria-expanded=true]]:max-h-[200px] group-has-[button[aria-expanded=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-[10px] pe-0 sm:pe-[10px]">
              <div class="w-[1px] bg-accent-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 1
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 2
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Item 3
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-4px">
      <a
        class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
        href="#">
        <svg
          width="20"
          height="20"
          viewbox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
        </svg>
        <span class="menu-item-text">
          Menu
        </span>
      </a>
      <a
        class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
        href="#">
        <svg
          width="20"
          height="20"
          viewbox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
        </svg>
        <span class="menu-item-text">
          Menu
        </span>
      </a>
      <a
        class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
        href="#">
        <svg
          width="20"
          height="20"
          viewbox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
        </svg>
        <span class="menu-item-text">
          Menu
        </span>
      </a>
    </div>
  </div>
</div>