Tailwind Navigation (Vertical) Components in Dashy library

<section class="relative" x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent">
  <nav class="flex xl:hidden items-center justify-between py-3.5 px-7 bg-neutral-50">
    <div class="w-full xl:w-auto px-2 xl:mr-10">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-7" href="#">
          <img src="dashy-assets/logos/dashy-circle2-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="relative z-50 hidden xl:flex xl:flex-col">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed xl:hidden inset-0 bg-gray-800 opacity-10"></div>
    <div class="fixed inset-0 max-w-xss bg-white">
      <div class="flex flex-wrap items-center justify-between px-7 py-2 pb-1 border-b border-gray-200">
        <div class="w-auto">
          <a class="inline-block" href="#">
            <img src="dashy-assets/logos/dashy-logo-dark.svg" alt="">
          </a>
        </div>
        <div class="w-auto">
          <a class="text-neutral-300 hover:text-neutral-400" href="#">
            <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97944 7.71965C6.68654 8.01254 6.68654 8.48742 6.97944 8.78031C7.27233 9.0732 7.7472 9.0732 8.0401 8.78031L6.97944 7.71965ZM11.1764 4.58331L11.7068 4.05298C11.4139 3.76009 10.939 3.76009 10.6461 4.05298L11.1764 4.58331ZM14.3128 8.78031C14.6057 9.0732 15.0805 9.0732 15.3734 8.78031C15.6663 8.48742 15.6663 8.01254 15.3734 7.71965L14.3128 8.78031ZM15.3734 14.2803C15.6663 13.9874 15.6663 13.5125 15.3734 13.2196C15.0805 12.9268 14.6057 12.9268 14.3128 13.2196L15.3734 14.2803ZM11.1764 17.4166L10.6461 17.947C10.939 18.2399 11.4139 18.2399 11.7068 17.947L11.1764 17.4166ZM8.0401 13.2196C7.7472 12.9268 7.27233 12.9268 6.97944 13.2196C6.68654 13.5125 6.68654 13.9874 6.97944 14.2803L8.0401 13.2196ZM8.0401 8.78031L11.7068 5.11364L10.6461 4.05298L6.97944 7.71965L8.0401 8.78031ZM10.6461 5.11364L14.3128 8.78031L15.3734 7.71965L11.7068 4.05298L10.6461 5.11364ZM14.3128 13.2196L10.6461 16.8863L11.7068 17.947L15.3734 14.2803L14.3128 13.2196ZM11.7068 16.8863L8.0401 13.2196L6.97944 14.2803L10.6461 17.947L11.7068 16.8863Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="flex-1 py-6 overflow-x-hidden overflow-y-auto">
        <div class="flex flex-col flex-wrap px-7 -m-2.5" x-data="{ outerDropdown: false }">
          <div class="w-auto p-2.5">
            <a x-ref="nav1" x-on:click.prevent="nav = $refs.nav1.textContent, outerDropdown = !outerDropdown" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/home-2.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Dashboard</p>
            </a>
          </div>
          <div :class="{'hidden': !outerDropdown }" class="hidden w-auto p-2.5" x-data="{ dropdown: false }">
            <a x-on:click.prevent="dropdown = !dropdown" class="flex flex-wrap items-center mb-3.5" href="#">
              <img class="mr-3" src="dashy-assets/images/gear.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">People &amp; Settings</p>
            </a>
            <div class="ml-8" :class="{'hidden': !dropdown}">
              <div class="flex flex-wrap -m-1">
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Help with Sketch</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">All Documents</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Shared with Me</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Libraries</a></div>
              </div>
            </div>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav2" x-on:click.prevent="nav = $refs.nav2.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/loader-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Discover</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav3" x-on:click.prevent="nav = $refs.nav3.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/lifebuoy.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Help with Sketch</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav4" x-on:click.prevent="nav = $refs.nav4.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/folder-open.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">All Documents</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav5" x-on:click.prevent="nav = $refs.nav5.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/user-circle.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Shared with Me</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav6" x-on:click.prevent="nav = $refs.nav6.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/link-2-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Libraries</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav7" x-on:click.prevent="nav = $refs.nav7.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/list-unordered-3-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">My Drafts</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a x-ref="nav8" x-on:click.prevent="nav = $refs.nav8.textContent" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/trash.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Trash</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-auto xl:ml-xss xl:pl-4"></div>
</section>