Hamburger menu for Mobile responsive

Hi there!

Happy to hear that you've been enjoying Tails so far!

Some of the elements already include hamburger menus for mobile devices. For example, you can use the Header 1 component as a reference:

But in general, to create a hamburger menu with Tailwind CSS and Apline.js, you use the following:

<div x-data="{ showMenu: false }" class="relative">
    <!-- Hamburger Button -->
    <button @click="showMenu = !showMenu" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-300 hover:text-black hover:border-black md:hidden">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
        </svg>
    </button>

    <!-- Menu Items -->
    <div x-show.transition="showMenu" @click.away="showMenu = false" class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg overflow-hidden md:relative md:w-auto md:bg-transparent md:shadow-none md:flex">
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200 md:text-black md:hover:bg-transparent">Home</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200 md:text-black md:hover:bg-transparent">About</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200 md:text-black md:hover:bg-transparent">Services</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200 md:text-black md:hover:bg-transparent">Contact</a>
    </div>
</div>

In this code snippet:

• We use x-data="{ showMenu: false }" to create a state variable showMenu to control the menu's visibility.
• The @click directive on the button toggles the showMenu state.
• The x-show.transition directive controls the visibility of the menu items based on the showMenu state.
• The @click.away directive closes the menu when a click is detected outside the menu.
• The md:hidden, md:relative, and other md: prefixed classes are used to apply styles for medium and larger screens, making the menu responsive.

Hope that this helps!

Best,

Bobby

Thank you for your quick response. I will try it out. I wish we have a duplicate function for pages so its easier to replicate menu navs and footers

Thank you for this feedback! I'll bring it up internally. In the meantime, what you could do is to add a blank component to your new page and paste all of the elements in there.

We do have some plans to add reusable components so that you could have shared navs and footer elements across all pages for example, but I don't have an ETA on when this will drop.