Fix dropdown auto open in tailwind ui navbar component with vue.js

Question

I use navbar component from tailwind ui. It's looks like something like this:

<!-- Profile dropdown -->
<div class="ml-3 relative">
  <div>
    <button
      class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
      id="user-menu"
      aria-label="User menu"
      aria-haspopup="true"
    >
      <img
        class="h-8 w-8 rounded-full"
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        alt
      />
    </button>
  </div>
  <!--
  Profile dropdown panel, show/hide based on dropdown state.

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
    <div
      class="py-1 rounded-md bg-white shadow-xs"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="user-menu"
    >
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Your Profile</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Settings</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Sign out</a>
    </div>
  </div>
</div>

In this case when I run this code in vue.js navbar dropdown menu status is open by default. How can set status closed by defaul?

Here is preview:

Answer 1

I'm not sure if anyone is following this question right now but I'm sharing my solution. In the snippet to the dropdown code there was a comment saying:

            <!--
            Profile dropdown panel, show/hide based on dropdown state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->

It's basically telling the state of dropdown is changing based on classes names so you'd have to make them dynamic like this:

<div :class="`origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg transition ease-${dropdown ? 'out' : 'in'} duration-${dropdown ? '100' : '75'} transform opacity-${dropdown ? '100' : '0'} scale-${dropdown ? '100' : '95'}`">

now the classes will depend on the dropdown value which is just a property of your component that can be changed via a click event like this:

export default {
  name: 'TheNavBar',
  data() {
    return {
      dropdown: false,
    }
  },
}

<div>
  <button
    id="user-menu"
    class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
    aria-label="User menu"
    aria-haspopup="true"
    @click="dropdown = !dropdown"
  >
  </button>
</div>

Answer 2

I was using alpinejs and included it using CDN. It worked for me when I put the following in the div that was wrapping the whole component:

x-data="{ open: false }"

The below went into the (User profile image) button div

@click="open = true"

And finally, this went into the drop-down div

x-show="open" @click.away="open = false"