Hamburger Menu Component

<nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
    <div class="flex justify-between items-center">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">
            Logo
        </div>
        <button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
            </svg>
        </button>
    </div>
    <div id="menu" class="hidden mt-4">
        <ul class="flex flex-col space-y-2">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </div>
</nav>
<style>
    @media (min-width: 768px) {
        #menu {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 0;
        }
        #menu-toggle {
            display: none;
        }
    }
</style>