Reputation: 105

Q: how to make use of Alpinejs and tailwindcss within Laravel?

I am trying to make use of Alpinejs using Adam Wathan's responsive navbar using vuejs, but i am experimenting if i can get it to work with Alpinejs.

app.blade.php

<head>

  [...]

      <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

  [...]

</head>

In case you are wondering if Alpine is already loaded, it is working trying a simple dropdown toggle, but with this approach i find it hard to get it working.

Navbar.blade.php

@guest('applicant')
@else
<header class="bg-gray-900 sm:flex sm:items-center sm:justify-between xl:bg-white" x-data="dropdown()">
  <div class="flex justify-between px-4 py-3 xl:w-72 xl:bg-gray-900 xl:justify-center xl:py-5">
    <div>
      [...]
    </div>
    <div class="flex sm:hidden">
      <button x-on:click="open" type="button"
        class="px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white">
        <svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path x-if="isOpen" fill-rule="evenodd" clip-rule="evenodd"
            d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
          <path x-if="!isOpen" fill-rule="evenodd"
            d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
        </svg>
      </button>
    </div>
  </div>
  <nav class="sm:flex sm:items-center sm:px-4 xl:flex-1 xl:justify-between"
    :class="{ 'hidden': !isOpen, 'block': isOpen }" x-show="open" x-on:click.away="close">
    <div class="hidden xl:block xl:relative xl:max-w-xs xl:w-full">
      [...]
    </div>
    <div class="sm:flex sm:items-center">
      [...]
      <div class="relative px-5 py-5 sm:py-0 sm:ml-4 sm:px-0">
        [...]
        <Dropdown class="hidden sm:block">
          <template #trigger="{ hasFocus, isOpen }">
            <span class="block h-8 w-8 overflow-hidden rounded-full border-2 "
              :class="[(hasFocus || isOpen) ? 'border-white xl:border-indigo-500' : 'border-gray-600 xl:border-gray-300']">
              <img class="h-full w-full object-cover"
                src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80"
                alt="">
            </span>
          </template>
          <template #dropdown>
            <div class="mt-3 bg-white xl:border rounded-lg w-48 py-2 shadow-xl">
              <a href="#account" class="block hover:text-white text-gray-800 px-4 py-2 hover:bg-indigo-500">Account
                settings</a>
              <a href="#support"
                class="block hover:text-white text-gray-800 mt-0 px-4 py-2 hover:bg-indigo-500">Support</a>
              <a href="#sign-out" class="block hover:text-white text-gray-800 mt-0 px-4 py-2 hover:bg-indigo-500">Sign
                out</a>
            </div>
          </template>
        </Dropdown>
      </div>
    </div>
  </nav>
</header>

<script>
function dropdown() {
  return {
    open: false,
    open() {
      this.show = true
    },
    close() {
      this.show = false
    },
    toggle() {
      this.isOpen = !this.isOpen
    },
  }
}
</script>
@endguest

Upvotes: 0

Answers (2)

Wesley-Sinde

Reputation: 377

In my case i didn't my javascript nor installed it, i just used the cdn

 {{-- scrip --}}
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

and had installed tailwind css. my code is..

                    <div x-data="{dropdownMenu: false}" class="lg:inline-block relative">
                        <!-- Dropdown toggle button -->
                        <button @click="dropdownMenu = ! dropdownMenu"
                            class="text-base no-underline   hover:bg-indigo-300 hover:text-cool-gray-900 rounded-3xl  py-1 px-2 ">
                            <span class="sr-only">{{ Auth::user()->name }}</span>
                            <img class="h-8 w-8 rounded-full"
                                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
                                alt="avatar">
                        </button>
                        <!-- Dropdown list -->
                        <div x-show="dropdownMenu"
                            class="absolute right-0 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl w-44">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                                Your Profile
                            </a>

                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                                Settings
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                                Reports
                            </a>
                            <a href="{{ route('logout') }}"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
                                onclick="event.preventDefault();document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                class="hidden">
                                {{ csrf_field() }}
                            </form>
                        </div>
                    </div>

this was my result when i click the avatar..

i hope this will assist you solve your problem

Upvotes: 0

user3532758

Reputation: 2271

You do not need to add the scripts to make a dropdown open and close. You need to have x-data defined in a parent (to both button and dropdown) div. Then reference it in the button and/or dropdown elements.

A simple example:

<div x-data="{isOpen : false}"> 
  
  <button x-on:click="isOpen = !isOpen" class="button">Menu</button>
  <!-- you need to toggle isOpen state on click. You can also use @click just like in vue -->

   <div x-show="isOpen" class="dropdown"> <!-- x-show to show and hide -->
     <a href="#account" class="your classes">Account settings</a>
     <a href="#support" class="">Support</a>
   </div>
    
</div>

That is all there is to make a dropdown using alpine js.

Upvotes: 1

Q: how to make use of Alpinejs and tailwindcss within Laravel?

Answers (2)

Related Questions