Toggle Sidebar not working in md screen

[gladtoseeuhappy]

Try to implement toggle side on medium sreen with Tailwind and Vuejs but its not work as expected, actually its work normally in Large Screen but md screen, it doesnt work.

My Code

<template>
    <div class="flex">
        <!-- Sidebar -->
        <aside :class="isOpen ? 'block' : 'hidden'">
            <div class="min-h-screen bg-gray-800 shadow-xs hidden md:block">
                <nav class="px-3">
                    <ul>
                        ....
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- Header -->
        <div class="flex-1">
            <header class="bg-white px-5 py-2">
                    <span
                        class="text-xl block hover:border-gray-500 cursor-pointer"
                        @click.prevent="isOpen = !isOpen"
                    >
                        <i class="fa fa-bars"></i>
                    </span>
            </header>
        </div>
    </div>
</template>


    data() {
        return {
            isOpen: true,
        };
    },

Any help will be appreciate. Thanks...

[estevanmaito]

but its not work as expected

What is the expected behavior? In which breakpoints should it show/hide?

but md screen, it doesnt work.

What it the wrong behavior? Does it cover the whole screen, doesn't show at all, gives an error...

[gladtoseeuhappy]

@estevanmaito yah, in md screen it doesnt show or hide sidebar when clicked burger button.

[devcircus]

Do you happen to be using tailwind ui with the sidebar plugin option? If so, you'll have to account for the 256px sidebar with your breakpoints. I just used your exact code and it worked as expected.

If not, dig around, see what's happening as you resize, then check your css in public and see what the breakpoints are.

[gladtoseeuhappy]

hello @devcircus did u try to minize screen to md screen and click toggle button. if yes, u will see it doesnt work on md screen.

[devcircus]

That's how I did it. It works fine on my end. Best way to get help would be to make a codepen that reproduces the behavior you're seeing and post the link here.