Компонент гамбургер-меню
Адаптивный компонент меню гамбургера, предназначенный для использования на приборной панели, стилизованный под 3D-дизайн с цветовой гаммой в оттенках серого, подходит как для светлых, так и для темных тем.
HTML-код
<div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
<div class="flex justify-between items-center">
<div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
<button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<nav class="mt-4">
<ul class="space-y-2">
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Home</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Profile</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Settings</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Logout</a>
</li>
</ul>
</nav>
</div>
Связанные компоненты
Компонент гамбургер-меню
Адаптивное меню-гамбургер, разработанное для интерфейсов социальных сетей, с темной темой и дополнительной цветовой схемой.
Компонент гамбургер-меню
Отзывчивый компонент Hamburger Menu, выполненный в стиле Брутализм с пастельной цветовой гаммой. Подходит для портфолио, демонстрирующего работы или продукты.
Компонент гамбургер-меню
Минималистичный/плоский компонент адаптивного меню гамбургера, подходящий для деловых/корпоративных веб-сайтов, использующий пастельную цветовую гамму и поддерживающий темный режим.