Компонент гамбургер-меню

<div class="flex items-center justify-between p-5 bg-gray-800 text-white">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
        <span class="text-2xl font-bold">Brutalism Menu</span>
    </div>
    <div class="lg:hidden">
        <button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
        </button>
    </div>
    <div class="hidden lg:flex space-x-4">
        <a href="#" class="font-semibold hover:text-gray-400">Home</a>
        <a href="#" class="font-semibold hover:text-gray-400">About</a>
        <a href="#" class="font-semibold hover:text-gray-400">Services</a>
        <a href="#" class="font-semibold hover:text-gray-400">Contact</a>
    </div>
</div>

<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
    <div class="flex flex-col items-center justify-center h-full space-y-4">
        <a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
        <button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #1a1a1a; }
    .bg-gray-900 { background-color: #121212; }
}
</style>