Make a responsive navbar with alpinejs and tailwind css

I made a navbar by using html, tailwind css and alpine.js. It should be responsive, so added two parts (horizontal and vertical nav links) as you see in my following code. It work fine, but is there a way that I can remove the vertical links part and merge it in the horizontal nav links part? Actually I don't want to repeat my links. This is my code:

<div class="bg-gray-800 text-white xs:flex-col sm:flex p-2 font-bold " x-data="{showDropdown:false}">
        <div class="flex flex-auto border p-2">
            <a class="flex-auto hover:text-cyan-300" href="#">Logo</a>
            <a class="hover:text-cyan-300 xs:block sm:hidden" href="#" x-on:click="showDropdown = !showDropdown" x-on:click.outside="showDropdown = ">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-8 border rounded">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
                </svg>
            </a>

        </div>
        <!-- Horizontal Nav Links -->
        <div class="xs:flex-col hidden sm:flex flex-auto border">
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full" href="#">Link 1</a>
            </div>
            <div
                class="flex flex-auto  sm:items-center sm:text-center  border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 2</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full" href="#">Link 3</a>
            </div>
            <div
                class="flex flex-auto  sm:items-center sm:text-center  border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 4</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 5</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 6</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 7</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 8</a>
            </div>
        </div>
         <!-- Vertical Nav Links -->
        <div class="xs:flex-col sm:hidden flex-auto border" x-show="showDropdown">
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full" href="#">Link 1</a>
            </div>
            <div
                class="flex flex-auto  sm:items-center sm:text-center  border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 2</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full" href="#">Link 3</a>
            </div>
            <div
                class="flex flex-auto  sm:items-center sm:text-center  border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 4</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 5</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 6</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 7</a>
            </div>
            <div class="flex flex-auto  sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
                <a class="w-full"" href=" #">Link 8</a>
            </div>
        </div>
        
    </div>
    <div class="p-4">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque illo excepturi asperiores accusamus facilis qui
    sed! Eius quod laboriosam, adipisci esse atque totam iusto quos saepe earum blanditiis, aliquid placeat!
    </div>

You'd could:

• Apply sm:!flex. This applies display: flex !important at the sm breakpoint. The !important flag will override the display: none inline style from when x-show is falsey, thus always showing the menu when horizontal.
• Also, apply sm:flex-row to have the flex layout be horizontal at the sm breakpoint.

<script src="https://cdn.tailwindcss.com/3.4.15"></script>
<script src="//unpkg.com/alpinejs" defer></script>

<div class="bg-gray-800 text-white xs:flex-col sm:flex p-2 font-bold" x-data="{showDropdown:false}">
  <div class="flex flex-auto border p-2">
    <a class="flex-auto hover:text-cyan-300" href="#">Logo</a>
    <a class="hover:text-cyan-300 xs:block sm:hidden" href="#" x-on:click="showDropdown = !showDropdown" x-on:click.outside="showDropdown = ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8 border rounded">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
      </svg>
    </a>
  </div>
  <!-- Horizontal Nav Links -->
  <div class="flex flex-col flex-auto sm:!flex sm:flex-row border" x-show="showDropdown">
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href="#">Link 1</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href=" #">Link 2</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href="#">Link 3</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href=" #">Link 4</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href=" #">Link 5</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href=" #">Link 6</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href=" #">Link 7</a>
    </div>
    <div class="flex flex-auto sm:items-center sm:text-center border hover:bg-gray-50 hover:text-gray-800 p-2">
      <a class="w-full" href=" #">Link 8</a>
    </div>
  </div>
</div>
<div class="p-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque illo excepturi asperiores accusamus facilis qui sed! Eius quod laboriosam, adipisci esse atque totam iusto quos saepe earum blanditiis, aliquid placeat!</div>