CODEWITHSUNDEEP
javascripttailwind-cssalpine.js
user15723984
user15723984

Reputation:

how to created a responsive menu using tailwindCss and alpinejs

I created a responsive menu using tailwindCss and alpinejs. The menu works properly in mobile mode But in desktop mode, the menu is not displayed because the x-show is equal to flase. How can I set the x-show to false in mobile mode? And in the desktop mode is equal to true.

    <div x-data="{open:false}" class="w-full bg-fuchsia-900">
        <div class=" container mx-auto  py-4 w-full  ">
            <header class="flex items-center  justify-between p-8 ">
                <img class="w-48 h-16" src="../src/images/logo.png" alt="">
                <div @click="open=true" class="block lg:hidden ">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="white">
                        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class=" lg:flex hidden ">
                    <img src="../src/images/motor.png" alt="">
                    <span class="block">Express Ship</span>
                </div>
            </header>
            <nav x-transition.duration.300ms x-show="open"  class="lg:flex lg:justify-end lg:p-0 lg:m-0    lg:bg-transparent bg-yellow-700 p-5 absolute lg:static inset-5 rounded-2xl text-white lg:text-black">
                <ul class="flex flex-col  lg:flex-row relative space-x-8   space-y-3   justify-end   ">
                    <li @click.outside="open=false" @click="open=false" class="absolute top-0 right-0 lg:hidden ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Our Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#"></a>Contact</li>
                    <li><a href="#"></a>Reserve</li>
                </ul>
            </nav>
        </div>
    </div>

Upvotes: 1

Views: 1212

Answers (1)

soheiljafarnejad
soheiljafarnejad

Reputation: 96

Instead of x-show , you can use :class to dynamically manage Tailwind classes. for example :

:class="open ? 'block' : 'hidden lg:flex' "

It is better to remove @click.outside="open=false" from your code.

Upvotes: 2

Related Questions