Application toolkit - Sidebar

<div class="min-h-[25rem]">
  <!-- Navigation Toggle -->
  <button type="button" class="text-gray-500 hover:text-gray-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">
    <span class="sr-only">Toggle Navigation</span>
    <svg class="w-5 h-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
    </svg>
  </button>
  <!-- End Navigation Toggle -->

  <div id="docs-sidebar" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-gray-200 pt-7 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-gray-800 dark:border-gray-700">
    <div class="px-6">
      <a class="flex-none text-xl font-semibold dark:text-white" href="javascript:;" aria-label="Brand">

        <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>hs2-logo</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
              <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
              <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
              <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
            </g>
          </g>
        </svg>

      </a>
    </div>
    <nav class="hs-accordion-group p-6 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
      <ul class="space-y-1.5">
        <li>
          <a class="flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-900 dark:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
              <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
            </svg>
            Dashboard
          </a>
        </li>

        <li class="hs-accordion" id="users-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
            </svg>
            Users

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="users-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>
              <li class="hs-accordion" id="users-accordion-sub-1">
                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
                  Sub Menu 1

                  <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>

                  <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>
                </a>

                <div id="users-accordion-sub-1" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
                  <ul class="pt-2 pl-2">
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 1
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 2
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 3
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="hs-accordion" id="users-accordion-sub-2">
                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
                  Sub Menu 2

                  <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>

                  <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>
                </a>

                <div id="users-accordion-sub-2" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden pl-2">
                  <ul class="pt-2 pl-2">
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 1
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 2
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 3
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>

        <li class="hs-accordion" id="account-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
            </svg>
            Account

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="account-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="pt-2 pl-2">
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 1
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 2
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 3
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li class="hs-accordion" id="projects-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"></path>
              <path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"></path>
            </svg>
            Projects

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="projects-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="pt-2 pl-2">
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 1
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 2
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 3
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
              <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
            </svg>
            Calendar
          </a></li>
        <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
            </svg>
            Documentation
          </a></li>
      </ul>
    </nav>
  </div>
</div>

<div class="min-h-[25rem]">
  <!-- Navigation Toggle -->
  <button type="button" class="text-gray-500 hover:text-gray-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">
    <span class="sr-only">Toggle Navigation</span>
    <svg class="w-5 h-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
    </svg>
  </button>
  <!-- End Navigation Toggle -->

  <div id="docs-sidebar" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-gray-200 pt-7 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-gray-800 dark:border-gray-700">
    <div class="px-6">
      <a class="flex-none text-xl font-semibold dark:text-white" href="javascript:;" aria-label="Brand">

        <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>hs2-logo</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
              <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
              <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
              <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
            </g>
          </g>
        </svg>

      </a>
    </div>
    <nav class="hs-accordion-group p-6 w-full flex flex-col flex-wrap">
      <ul class="space-y-1.5">
        <li>
          <a class="flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-900 dark:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
              <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
            </svg>
            Dashboard
          </a>
        </li>

        <li class="hs-accordion" id="bu-users-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
            </svg>
            Users

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="bu-users-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="hs-accordion-group pl-3 pt-2">
              <li class="hs-accordion" id="bu-users-accordion-sub-1">
                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
                  Sub Menu 1

                  <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>

                  <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>
                </a>

                <div id="bu-users-accordion-sub-1" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
                  <ul class="pt-2 pl-2">
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 1
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 2
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 3
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="hs-accordion" id="bu-users-accordion-sub-2">
                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
                  Sub Menu 2

                  <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>

                  <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>
                </a>

                <div id="bu-users-accordion-sub-2" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden pl-2">
                  <ul class="pt-2 pl-2">
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 1
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 2
                      </a>
                    </li>
                    <li>
                      <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                        Link 3
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>

        <li class="hs-accordion" id="bu-account-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
            </svg>
            Account

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="bu-account-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="pt-2 pl-2">
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 1
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 2
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 3
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li class="hs-accordion" id="bu-projects-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"></path>
              <path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"></path>
            </svg>
            Projects

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="bu-projects-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="pt-2 pl-2">
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 1
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 2
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 3
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
              <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
            </svg>
            Calendar
          </a></li>
        <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
            </svg>
            Documentation
          </a></li>
      </ul>
    </nav>
  </div>
</div>

<div class="min-h-[25rem]">
  <!-- Navigation Toggle -->
  <button type="button" class="text-gray-500 hover:text-gray-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">
    <span class="sr-only">Toggle Navigation</span>
    <svg class="w-5 h-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
    </svg>
  </button>
  <!-- End Navigation Toggle -->

  <div id="docs-sidebar" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-gray-200 pt-7 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-gray-800 dark:border-gray-700">
    <div class="px-6">
      <a class="flex-none text-xl font-semibold dark:text-white" href="javascript:;" aria-label="Brand">

        <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>hs2-logo</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
              <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
              <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
              <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
            </g>
          </g>
        </svg>

      </a>
    </div>
    <nav class="hs-accordion-group p-6 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
      <ul class="space-y-1.5">
        <li>
          <a class="flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-900 dark:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
              <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
            </svg>
            Dashboard
          </a>
        </li>

        <li class="hs-accordion" id="users-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
            </svg>
            Users

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="users-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="hs-accordion-group pl-3 pt-2 space-y-3" data-hs-accordion-always-open>
              <li class="hs-accordion" id="users-accordion-sub-1">
                <span class="py-2 px-2.5 text-sm text-slate-500">
                  Item 1
                </span>

                <ul class="pt-2 pl-2 space-y-2">
                  <li>
                    <a class="block py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                      Link 1
                    </a>
                  </li>
                  <li>
                    <a class="block py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                      Link 2
                    </a>
                  </li>
                  <li>
                    <a class="block py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                      Link 3
                    </a>
                  </li>
                </ul>
              </li>
              <li class="hs-accordion" id="users-accordion-sub-1">
                <span class="py-2 px-2.5 text-sm text-slate-500">
                  Item 2
                </span>

                <ul class="pt-2 pl-2 space-y-2">
                  <li>
                    <a class="block py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                      Link 1
                    </a>
                  </li>
                  <li>
                    <a class="block py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                      Link 2
                    </a>
                  </li>
                  <li>
                    <a class="block py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                      Link 3
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </li>

        <li class="hs-accordion" id="account-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
            </svg>
            Account

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="account-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="pt-2 pl-2">
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 1
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 2
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 3
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li class="hs-accordion" id="projects-accordion">
          <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"></path>
              <path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"></path>
            </svg>
            Projects

            <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>

            <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </a>

          <div id="projects-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
            <ul class="pt-2 pl-2">
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 1
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 2
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
                  Link 3
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
              <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
            </svg>
            Calendar
          </a></li>
        <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300" href="javascript:;">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
            </svg>
            Documentation
          </a></li>
      </ul>
    </nav>
  </div>
</div>