drawer

<div class="hidden">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <!-- ToDo: Close drawer when item gets clicked -->
    <label for="my-drawer-3" class="drawer-overlay"></label>
    <ul class="menu p-4 w-80 bg-base-100">
      <!-- Sidebar content here -->
      <NuxtLink to="/RealmBoard">
        <li class="menu-title opacity-40">业务范围一览</li>
      </NuxtLink>
      <li>
        <NuxtLink to="/RealmDetail?realm=A">
          <a @click="activeRealm = 'A'">语言类</a>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/RealmDetail?realm=B">
          <a @click="activeRealm = 'B'">工程类</a>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/RealmDetail?realm=C">
          <a @click="activeRealm = 'C'">咨询与服务类</a>
        </NuxtLink>
      </li>
      <li class="absolute inset-x-0 bottom-0 h-16 ...">
        <NuxtLink to="/About">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 mx-auto">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
          </svg>
        </NuxtLink>
        <NuxtLink to="/PageList">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 mx-auto">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
          </svg>
        </NuxtLink>
        <NuxtLink to="/PostList">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 mx-auto">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
          </svg>
        </NuxtLink>
      </li>
    </ul>
  </div>