Home
TailwindFlex
Responsive navbar with dark mode support

Responsive navbar with dark mode support

Sidebar on small screen devices

This tailwind example is contributed by TailwindFlex, on 16-Jul-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar Navbar

Author TailwindFlex

19k

Fork Fullscreen

<a class="text-2xl font-bold text-violet-600 dark:text-white" href="#">
        TailwindFlex
    </a>

<div class="lg:hidden">
        <button class="navbar-burger flex items-center text-violet-600 dark:text-gray-100 p-1" id="navbar_burger">
                <svg class="block h-6 w-6 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Hamberger menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
        </button>
    </div>

</div>
        </li>
    </ul>

<a href="https://tailwindflex.com/playground">
            <button class=" py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700 hidden lg:block">
                    Tailwind Playground
            </button>
        </a>

</div>

</nav>

<div class="navbar-menu relative z-50 hidden">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-50"></div>
    <nav
        class="fixed bg-white dark:bg-gray-600 top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 border-r overflow-y-auto">

<div class="flex items-center mb-8">
            <a class="mr-auto text-2xl font-bold text-black text-violet-600 dark:text-gray-100"
                href="https://tailwindflex.com/">
                TailwindFlex
            </a>

</div>

<a class="block py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700 px-4 py-3 mb-2 text-xs text-center text-white font-semibold bg-violet-600 hover:bg-violet-700  rounded-xl"
                    href="https://tailwindflex.com/playground">
                    Tailwind Playground
                </a>

</div>
            <p class="my-4 text-xs text-center text-gray-400">
                <span>TailwindFlex Copyright © 2023</span>
            </p>
        </div>
    </nav>
</div>

var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
        var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

var themeToggleDarkIcon_2 = document.getElementById('theme-toggle-dark-icon-2');
        var themeToggleLightIcon_2 = document.getElementById('theme-toggle-light-icon-2');

// Change the icons inside the button based on previous settings
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia(
            '(prefers-color-scheme: dark)').matches)) {
            themeToggleLightIcon.classList.remove('hidden');
            if (themeToggleDarkIcon_2) {
                themeToggleLightIcon_2.classList.remove('hidden');
            }
        } else {
            themeToggleDarkIcon.classList.remove('hidden');
            if (themeToggleDarkIcon_2) {
                themeToggleDarkIcon_2.classList.remove('hidden');
            }
        }

var themeToggleBtn_2 = document.getElementById('theme-toggle-2');
        if (themeToggleBtn_2) {

themeToggleBtn_2.addEventListener('click', function () {

// toggle icons inside button
                themeToggleDarkIcon_2.classList.toggle('hidden');
                themeToggleLightIcon_2.classList.toggle('hidden');

sync_theme()

});
        }

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function () {

// toggle icons inside button
            themeToggleDarkIcon.classList.toggle('hidden');
            themeToggleLightIcon.classList.toggle('hidden');

sync_theme()

});

}

document.addEventListener('DOMContentLoaded', function () {
            // open
            const burger = document.querySelectorAll('.navbar-burger');
            const menu = document.querySelectorAll('.navbar-menu');

if (burger.length && menu.length) {
                for (var i = 0; i < burger.length; i++) {
                    burger[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

// close
            const close = document.querySelectorAll('.navbar-close');
            const backdrop = document.querySelectorAll('.navbar-backdrop');

if (close.length) {
                for (var i = 0; i < close.length; i++) {
                    close[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

if (backdrop.length) {
                for (var i = 0; i < backdrop.length; i++) {
                    backdrop[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }
        });
</script>

Related Examples