tailwind admin

by Manan Patel

HTML

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        <div style="min-height: 1100px">
            <div onclick="openSidebar(false)" class="flex items-center justify-center rounded-r-md bg-gray-800 text-gray-300 ml-0 cursor-pointer absolute inset-0 mt-10 m-auto w-8 h-8">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <polyline points="9 6 15 12 9 18" />
                </svg>
            </div>
            <div id="sidebar" class="overflow-y-scroll lg:overflow-y-auto fixed lg:sticky h-screen lg:h-auto z-40 top-0 bg-gray-900 pt-10 w-64 lg:w-72">
                <div class="px-8">
                    <div class="flex items-center justify-between">
                        <div class="w-32">
                            <img class="w-full" src="https://cdn.tuk.dev/assets/components/todos/logo.png" alt="quicklist logo" />
                        </div>
                        <div onclick="openSidebar(true)" class="text-gray-700 ml-8 cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z"></path>
                                <polyline points="15 6 9 12 15 18"></polyline>
                            </svg>
                        </div>
                    </div>
                    <ul class="my-10 flex flex-wrap">
                        <li class="w-1/2 flex justify-start mb-6">
                            <a href="javascript:void(0)" class="bg-gray-700...

JavaScript

openSidebar = (flag) => {
    let sidebar = document.getElementById("sidebar");
    flag ? sidebar.classList.add("hidden") : sidebar.classList.remove("hidden");
};